


器 图 灵 程 序 设计 从 书 dd 
Big Nerd 
Ranch 


通过 4 个 实战 项 目 
全 面 掌握 Web 开 发 





机 i = 2 

美 ](Ghris;Aquind=T6dd Gandse 

[ ][Chris; q - 著 
aa 





效 字 有 版权 声明 


图 灵 社 区 的 电子 书 没有 采用 专 有 客 
户 端 ， 您 可 以 在 任意 设备 上 ， 用 自 
己 喜 欢 的 浏览 器 和 PDF 阅读 器 进行 
阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 用 ， 
未 经 授权 ， 不 得 进行 传播 。 

我 们 愿意 相信 读者 具有 这 样 的 良知 
和 觉悟 ， 与 我 们 共同 保护 知识 产权 。 


如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 户 实 施 包括 但 不 限于 关闭 该 
帐号 等 维权 措施 ， 并 可 能 追究 法 律 
责任 。 








译 者 简介 


本 书 译 者 均 来 自 奇 虎 360 前 端 团 队 “ 奇 舞 团 ” 


孟 之 杰 
技术 翻译 爱好 者 ， 具 有 Geek 精 神 ， 
喜欢 折腾 各 种 有 意思 的 东西 。 


黄 小 璐 
毕业 于 华中 科技 大 学 计算 机 学 院 ， 参 与 过 的 开源 


项 目 包括 ThinkJS (基于 Node 的 Web 框 架 ) 和 
STC ( 高 性 能 前 端 工作 流 系统 ) ， 参 与 翻译 了 
《高 性 能 HTML5 》《 移 动 Web 手 册 》《 大 型 


JavaScript 应 用 最 佳 实践 指南 》。 


钟 恒 
《响应 式 Web 设 计 : HTML5 和 CSS3 实 战 (第 
2 版 ) 》 译 者 ， 曾 在 QCon、SDCC、 
SFDC 等 大 会 上 发 表演 讲 。 


卢 士 杰 
燕尾 服 2.0 与 ThinkJS3 开 源 项 目 贡献 者 ， 
360 前 端 静态 资源 库 网 站 开发 与 维护 者 。 


孟 苹 冶 
ACMer， 毕 业 于 哈尔滨 工程 大 学 软件 学 院 ， 
爱好 翻译 。 
文 向 


毕业 于 国内 某 知名 新 闻 学 院 ， 技 术 翻 译 爱 好 者 ， 


前 端 公众 号 “ 奇 舞 周刊 ”编辑 。 
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内 容 提 要 


本 书 在 知名 培训 机 构 Big Nerd Ranch 培训 教材 的 基础 上 编写 而 成 ， 野 括 了 JavaScript、HTML5、CSS3 
等 现代 前 端 开发 人 员 急 需 的 技术 关键 点 ， 包 括 响 应 式 UT、 访问 远程 Web 服务 、 用 Emberjs 构建 应 用 ， 等 等 。 
此 外 ， 还 会 介绍 如 何 使 用 前 沿 开发 工具 来 调试 和 测试 代码 ， 并 且 充 分 利用 Nodejs 和 各 种 开源 的 npm 模块 
的 强大 功能 来 进行 开发 。 

全 书 分 四 部 分 ， 每 部 分 独立 完成 一 个 项 目 ， 由 浅 入 深 、 循序渐进 ， 在 构建 一 系列 应 用 的 过 程 中 ， 介 绍 
Web 开发 的 核心 概念 和 API。 

无 论 是 否 拥有 Web 开发 经 验 ， 抑 或 拥有 其 他 平台 的 开发 背景 ， 只 要 对 当今 流行 的 工具 和 开发 实践 充满 
兴趣 ， 这 本 书 都 能 让 你 受益 匪 浅 。 
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感谢 父母 为 我 们 购置 了 一 台电 脑 ; 感谢 Dave 和 Glenn 让 你 们 的 弟弟 我 完全 霸占 了 那 台 电脑 ; 
感谢 Angela 让 我 拥有 电脑 世界 之 外 的 美好 生活 。 
会: 


谢谢 父母 给 我 足够 的 空间 ， 让 我 找到 自己 的 方向 ; 感谢 我 的 麦子 ， 谢 谢 你 对 我 这 个 书 采 子 的 
爱 。 
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学 习 前 端 Web 开发 


进行 前 端 Web 开 发 可 能 需要 转换 一 下 观念 ， 因 为 它 跟 其 他 平台 上 的 开发 有 很 大 不 同 。 在 学 习 
过 程 中 ， 你 需要 时 刻 牢记 以 下 几 点 。 

浏览 器 是 一 个 平台 

你 也 许 在 iOS 或 者 Android 上 进行 过 原生 开发 ， 或 者 用 Ruby、PHP 写 过 服务 器 端 代码 ， 抑 或 在 
OS X 或 者 Windows 上 构建 过 桌面 应 用 。 但 作为 前 端 开 发 者 , 你 的 代码 则 需要 面向 浏览 一 个 
几乎 存在 于 全 世界 所 有 手机 、 平 板 电脑 和 个 人 计算 机 中 的 平台 。 

前 端 开 发 横 跨 一 个 范围 

这 个 范围 的 一 端 是 网 页 的 外 观 和 风格 〈 圆 角 、 阴 影 、 颜 色 、 字 体 、 空 白 等 )， 男 一 端 则 是 控 
制 网 页 复杂 行为 的 逻辑 ( 浏览 交互 式 相册 时 滑动 图 片 、 校 验 表单 数据 、 通 过 聊天 网 络 发 送 消 息 等 )。 
你 需要 通晓 这 个 范围 内 的 每 种 核心 技术 ,还 经 常 需要 搭配 使 用 多 种 技术 来 实现 优秀 的 Web 应 用 。 

Web 技 术 是 开放 的 

没有 哪 家 公司 能 够 控制 浏览 器 的 工作 方式 。 也 就 是 说 , 前 端 开 发 者 并 不 会 每 年 得 到 一 个 SDK 
版 本 ,而 且 这 个 版 本 里 还 包含 了 未 来 一 年 中 可 能 要 人 处理 的 所 有 改变 ,原生 平台 就 像 结 了 冰 的 池塘 ， 
任 你 舒适 地 滑 过 ; 而 Web 就 像 河流 ， 蚁 蝶 曲 折 ， 水 流 注 急 ， 某 些 地 方 还 会 有 礁石 一 一 不 过 这 正 是 
它 的 魅力 所 在 。Web 是 进化 最 快 的 平台 ， 适 应 变化 才 是 前 端 开 发 者 的 生存 之 道 。 

本 书 的 目标 是 教会 你 如 何在 浏览 器 上 进行 开发 。 在 本 书 的 指导 下 , 你 将 会 经 历 一 系列 项 目的 
开发 ， 而 每 个 项 目 都 需要 搭配 使 用 前 端 范围 内 的 不 同 技术 。 因 为 前 端 可 用 的 工具 、 库 以 及 框架 不 
计 其 数 ， 所 以 本 书 主要 使 用 最 重要 也 最 便于 移植 的 模式 和 技术 。 


目标 读者 


这 并 不 是 一 本 介绍 编程 的 书 。 本 书 假定 你 已 经 具备 编写 代码 的 基础 知识 , 并 熟悉 基本 的 类 型 、 
函数 和 对 象 。 

话 虽 如 此 ， 但 本 书 不 要 求 你 了 解 JavaScript。 根 据 需 要 ， 本 书 会 在 具体 语 境 中 介绍 JavaScript 
的 相关 概念 。 

























































































本 书 的 组 织 结构 


本 书 会 指导 你 实现 四 个 不 同 的 Web 应 用 。 每 个 应 用 对 应 书 中 的 一 个 部 分 ， 每 个 部 分 的 每 一 章 
会 向 当前 正在 构建 的 应 用 添加 新 功能 。 
构建 这 4 个 应 用 的 过 程 横 跨 整个 前 端 范围 。 


Ottergram 第 一 个 项 目 是 一 个 基于 Web 的 图 片 浏览 应 用 。 通 过 构建 Ottergram， 能 教会 你 通过 使 用 HTML、CSS 
以 及 JavaScript 进 行 浏览 器 编程 的 基础 知识 。 你 将 手动 构建 用 户 界面 (User Interface，UI) ， 并 且 
掌握 浏 览 器 加 载 和 泻 染 内 容 的 方式 

CoffeeRun CoffeeRun 的 一 部 分 是 咖啡 订购 表单 ， 另 一 部 分 是 清单 。 构 建 本 应 用 涉及 一 系列 JavaScript 技 术 ， 包 
括 编写 模块 代码 、 使 用 闲 包 ， 以 及 使 用 Ajax 与 远程 服务 器 通信 。 你 的 关注 点 会 从 之 前 的 手动 创建 
UI 转移 到 通过 编程 创建 和 操作 UI 























Chattrbox Chattrbox 的 内 容 最 少 ， 但 也 最 特别 。 你 将 用 JavaScript 创 建 一 个 聊天 系统 ， 用 Node.js 编 写 一 个 聊天 
服务 器 和 一 个 基于 浏览 器 的 聊天 客户 端 
Tracker 最 后 一 个 项 目 将 使 用 Emberjs， 它 是 前 端 开 发 最 强大 的 框架 之 一 。 你 将 会 创建 一 个 应 用 ， 用 来 收录 

















人 们 见 过 的 奇异 、 神 秘 的 珍稀 生物 。 在 开发 过 程 中 ， 你 会 学 习 支撑 Emberjs 框 架 的 丰富 的 生态 系统 


在 开发 这 些 应 用 的 过 程 中 ， 你 将 会 学 习 使 用 很 多 工具 ， 包 括 : 
口 Atom 文 本 编辑 器 和 一 些 方便 代码 编写 的 插件 

口 文档 资源 ， 比 如 Mozilla Developer Network ( MDN ) 

口 命令 行 ， 使 用 OS X 终 端 应 用 或 者 Windows 命 令 行 

口 browser-Sync 

口 Google Chrome 开 发 者 工具 


口 normalize.css 




















口 Bootstrap 

D jQuery 以 及 库 函 数 ， 比 如 crypto-js 和 moment 

口 Nodejs、Node 包 管理 工具 ( Node package manager，npm ) 以 及 nodemon 

口 WebSockets 和 wscat 模 块 

口 Babel 、Babelify 、Browserify 以 及 Watchify 

口 Emberjs 和 插件 ， 比 如 Ember CLI、Ember Inspector、Ember CLI Mirage 以 及 Handlebars 


口 Bower 








口 Homebrew 
口 Watchman 


如 何 使 用 本 书 


不 同 于 参考 手册 , 本 书 的 目标 是 带 你 人 门 ， 让 你 学 到 参考 手册 上 所 教 的 大 部 分 知识 。 本 书 基 
于 Big Nerd Ranch 的 5 天 课程 ， 因 此 会 从 和 人 门 知 识 开始 。 每 一 章 都 基于 前 面 的 知识 ， 所 以 跳跃 式 阅 


读 可 能 会 影响 学 习 效 果 。 
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在 我 们 的 课堂 上 , 学 生 会 学 习 本 书 的 内 容 , 但 是 他 们 还 能 享受 一 个 良好 的 环境 
习 氛 围 、 好 吃 的 食物 、 相 互 鼓励 的 同学 ， 还 有 答疑 解 惑 的 辅导 老师 。 
作为 读者 ， 你 也 会 希望 有 相似 的 环境 。 所 以 ， 睡 个 好 觉 ， 找 一 个 安静 的 地 方 开始 学 习 吧 。 做 
下 面 这 些 事 情 也 会 有 所 帮助 。 
口 与 朋友 或 同事 组 成 一 个 阅读 小 组 。 
口 安排 一 段 时 间 集 中 学 习 一 些 章 市。 
口 参与 本 书 论坛 forums.bignerdranch.com 上 的 讨论 ， 在 那儿 你 能 探讨 书 中 内 容 ， 发 现 勘 误 并 


浓厚 的 学 















































找到 解决 方案 。 
口 找 个 了 解 前 端 开发 的 人 帮 你 。 
挑战 


几乎 每 一 章 的 结尾 部 分 都 会 有 至 少 一 个 挑战 。 这 些 挑战 能 帮 你 复习 所 学 知识 , 并 将 这 一 童 中 
做 的 项 目 再 推进 一 步 。 建 议 你 尽量 完成 这 些 挑 战 , 这 样 可 以 巩固 所 学 的 知识 ,并 且 从 学 习 JavaScript 
开发 变 为 自己 从 事 JavaScript 开 发 。 
这 些 挑战 的 难度 分 为 3 个 级 别 。 
口 初级 挑战 一 般 要 求 你 做 一 些 与 该 章 内 容 相 似 的 事情 。 这 些 挑战 则 在 强化 所 学 内 容 ， 人 迫使 
你 在 不 看 代码 的 情况 下 写 出 相似 的 代码 。 熟 能 生 巧 就 是 这 个 道理 。 
口 中 级 挑战 要 求 你 控 气 更深， 思考 更 多 。 有 时 候 需 要 使 用 你 从 未 见 过 的 函数 、 事 件 、 标 记 
以 及 样式 ， 但 是 任务 还 是 与 该 章 的 任务 类 似 。 
口 高 级 挑战 很 难 ， 可 能 需要 花 好 几 个 小 时 才能 完成 。 它 们 要 求 你 理解 该 章 介 绍 的 概念 ， 做 
一 些 质量 层面 的 思考 ， 并 自己 解决 问题 。 解 决 这 些 问题 可 以 为 你 在 现实 世界 中 进行 
JavaScript 开 发 做 好 准备 。 
进行 每 一 章 的 挑战 之 前 都 复制 一 份 代码 ， 否 则 你 做 的 改动 可 能 无 法 兼容 后 续 的 练习 。 
如 果 你 感到 困惑 ， 记 得 访问 forums.bignerdranch.com 寻 求 帮助 。 


延展 阅读 


每 章 结 尾 的 “延展 阅读 ”对 该 章 话题 做 了 更 深入 的 解释 , 或 者 提供 了 附加 信息 。 这 部 分 信息 
并 不 一 定 重 要 ， 但 是 希望 你 觉得 它们 有 趣 或 者 有 用 。 


电子 书 
如 需 购买 本 书 的 电子 版 ， 请 扫描 如 下 二 维 码 。 



















































































致谢 





作为 作者 , 我 们 完全 可 以 把 本 书 中 的 文字 和 图 表 都 归功 于 我 们 自己 。( 棒 呀 ,我们 ! ) 但 实际 
上 ， 如 果 没 有 投稿 人 、 协 作者 和 导师 们 的 共同 努力 ， 我 们 可 能 到 现在 都 无 从 下 笔 。 
口 Aaron Hillegass 相 信 我 俩 能 写 出 配 得 上 Big Nerd Ranch 之 名 的 作品 。 你 给 予 了 我 们 极 大 的 
信心 和 支持 ， 谢 谢 ! 
口 Matt Mathias 在 本 书 的 创作 过 程 中 给 予 了 我 们 指导 ， 对 最 后 关键 部 分 的 建议 尤为 重要 。 你 
督促 我 们 把 时 间 花 在 写作 上 ， 而 不 是 花 在 看 猫咪 视频 或 者 《 唐 顿 庄园 》 的 重播 上 。 
口 Brandy Porter 一 直 照 料 我 俩 并 给 我 们 亮 饪 美食 。 你 在 幕后 做 了 各 种 工作 ， 为 本 书 的 顺利 出 
版 打点 好 了 一 系列 事情 。 谢 谢 你 。 
D Jonathan Martin 是 我 们 的 导师 和 语言 专家 。 谢 谢 你 充满 热情 地 教 我 们 尚未 完结 的 课程 内 
容 ， 本 书 就 是 基于 这 些 内 容 写成 的 。 在 多 次 审 校 中 ， 你 还 提供 了 很 有 深度 的 意见 和 建议 。 
口 我 们 的 校对 员 、 技 术 审 稿 人 以 及 实验 对 象 : Mike Zornek、Jeremy Sherman 、Josh Justice、 
Jason Reece 、Garry Smith 、Andrew Jones 、Stephen Christopher 以 及 Bil Phillips。 谢 谢 你 们 
的 志愿 工作 。 
口 Elizabeth Holaday 是 一 位 极 具 耐心 且 令 人 安心 的 编辑 。 谢 谢 你 打破 我 们 狭隘 的 思维 ， 提 出 
有 理 有 据 的 观点 ， 并 提醒 我 们 始终 要 考虑 到 读者 。 
口 Ellie Volckhausen ， 谢 谢 你 设计 了 封面 。 
口 Simone Payment 是 我 们 的 校对 员 ， 谢 谢 你 让 本 书 内 容 连贯 一 致 。 
口 来 自 IntelligentEnglish.com 的 Chris Loper 设 计 并 制作 了 本 书 的 印刷 版 和 电子 版 。 另 外 ， 他 
的 DocBook 工 具 链 非常 好 用 。 
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配置 开发 环境 








前 端 开发 领域 有 着 数 不 清 的 工具 和 资源 , 而 且 还 有 更 多 工具 在 被 源源 不 断 地 制造 出 来 。 无 论 
开发 者 的 水 平 如 何 , 选择 最 佳 工 具 都 极 具 挑 战 性 。 本 书 的 项 目 将 会 带 你 使 用 一 些 本 书 作者 非常 喜 
爱 的 工具 。 

首先 你 需要 三 个 基本 工具 : 浏览 器 、 文 本 编辑 器 ， 以 及 好 用 的 前 端 开发 技术 参考 文档 。 此 外 
还 有 一 些 能 够 提升 开发 体验 的 附加 选项 ， 当 然 它们 并 非 必需 品 。 

为 达到 最 佳 效 果 ， 建 议 你 和 本 书 作者 使 用 相同 的 软件 。 本 章 会 引导 你 安装 并 配置 Google 
Chrome 浏 览 需 、Atom 文 本 编辑 咒 、Node.js 以 及 一 些 插件 。 另 外 还 会 介绍 一 些 优 秀文 档 ， 并 针对 
Mac 和 Windows 命 令 行 进行 一 次 突击 学 习 。 在 下 一 章 开 始 第 一 个 项 目 时 , 这 些 资源 将 会 派 上 用 场 。 








1.1 安装 Google Chrome 


默认 情况 下 ， 你 的 电脑 应 该 已 安装 过 浏览 器 ， 但 前 端 开发 中 最 好 用 的 浏览 器 还 是 Google 
Chrome。 若 尚未 安装 最 新 版 Chrome， 可 以 通过 www.google.com/chrome/browserdesktop 获 取 (如 
图 1-1 所 示 )。 








Get a fast free web browser 


ne browser for your computer, phone and tabl 








图 1-1 下 载 Google Chrome 


1.2 安装 并 配置 Atom 3 





1.2 ”安装 并 配置 Atom 


在 众多 文本 编辑 器 中 ，GitHub 出 品 的 Atom 是 前 端 开 发 的 最 佳 选择 之 一 。 它 可 以 进行 大 量 配 
置 ， 也 有 很 多 辅助 编码 的 插件 。 男 外 ， 它 可 以 免费 下 载 使 用 。 
可 以 通过 atom.io 下 载 Mac 版 或 Windows 版 的 Atom ( 如 图 1-2 所 示 )。 





©00 Aon 


€ © | https://atom.io 
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至 Download For Mac 





图 1-2 ”下 载 Atom 





遵循 安装 指引 即 可 。 安 装 成 功 后 ， 还 需要 安装 一 些 可 能 用 到 的 插件 。 
Atom 插 件 


对 于 一 款 文本 编辑 器 来 说 ， 最 需要 的 无 非 是 文档 查询 、 自 动 补 全 、 代 码 格式 化 以 及 代码 提示 
( 接 下 来 会 细 说 ) 功能 。Atom 默 认 提 供 了 一 部 分 功能 ， 但 安装 一 些 插件 后 效果 会 更 好 。 

打开 Atom 的 Settings 面 板 。 在 Mac 上 ， 选 择 Atom 一 Pre ferences...， 或 者 使 用 Command + ， 
(Command 加 逗号 ) 快捷 键 。 在 Windows 上 ， 点 击 File 一 Settings 或 者 按 Control + ,快捷 键 。 

左 侧 就 是 Settings 面 板 ， 点 击 + Pstal ( 如 图 1-3 所 示 )。 




















O00 Settings - Atom 





中 Install Packages 


龙 Featured Packages 


图 1-3 Atom Install Packages 面 板 
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可 以 根据 名 称 搜索 插件 ， 先 搜索 “emmet” 试 试看 。 
书写 大 量 HTML 是 很 枯燥 的 ， 而 且 容 易 出 错 。 通 过 emmet 插 件 ( 如 图 1-4 所 示 )， 可 以 用 一 些 
速记 符 生 成 符合 语法 规则 的 HTML。 点 击 Install 按 钮 开始 安装 emmet。 











Install Packages 


Packages 


< Install 





图 1-4 安装 emmet 


然后 再 搜索 “atom-beautify”。 该 插件 (如 图 1-5 所 示 ) 可 辅助 缩 进 ， 提 高 代码 可 读 性 。 同 样 
还 是 点 击 Install 进 行 安装 。 
































atom-beautify 
a ML css |) 


人 


< Install 





图 1-5 ”安装 atom-beautify 


接着 搜索 并 安装 autocomplete-paths( 如 图 1-6 所 示 )。 在 代码 中 ， 经 常 需要 引用 其 他 文件 或 目 
录 。 该 搬 件 能 够 在 输入 文件 名 时 提供 自动 补 全 功能 。 





autocomplete-paths 


th autocomp 1 to autocomplete 


> Install 





图 1-6 ”安装 autocomplete-paths 


接 下 来 安装 api-docs( 如 图 1-7 所 示 )， 这 样 就 可 以 通过 键盘 查阅 文档 。 文 档 会 在 编辑 需 单 独 
的 一 个 标签 面板 中 显示 。 

















api-docs 
二 


> Install 





图 1-7 ”安装 api-docs 
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下 面 安装 linter ( 如 图 1-8 所 示 )。linter 是 一 个 用 来 检查 代码 语法 和 风格 的 程序 。 请 确认 你 安装 - 
的 插件 就 叫 作 linter。 这 是 一 个 基础 linter， 与 特定 语言 插件 搭配 使 用 效果 更 住 ， 有 了 它 , 才能 使 
用 后 续 其 他 linter 插 件 。 
































linter 


> Install 





图 1-8 ”安装 linter 


要 使 用 linter 检 查 CSS、HTML 和 JavaScript 代 码 , 还 需 安装 男 外 三 个 插件 ,首先 安装 linter-csslint 
( 如 图 1-9 所 示 )， 该 插件 在 保证 CSS 代 码 语法 正确 的 同时 ， 还 能 提供 编写 高 性 能 CSS 的 建议 。 











linter-csslint 


t CSS on the fly, using csslint 


> Install 





图 1-9 安装 linter-csslint 


然后 是 linter-htmlhint ( 如 图 1-10 所 示 )， 它 确保 HTML 代 码 保持 良好 的 格式 。 当 HTML 标 签 匹 
配 错误 时 ， 编 辑 器 会 显示 警告 信息 。 




















ant 
nter p [i using htmlhin 


对 > Install 





图 1-10 安装 linter-htmlhint 


最 后 一 个 linter 插 件 是 lintereslint ( 如 图 1-11 所 示 ) 它 能 检查 JavaScript 代 码 的 语法 , 还 能 通过 
配置 检查 代码 的 风格 和 格式 〈 如 每 行 缩 进 几 个 空格 ， 注 释 前 后 空 几 行 等 )。 








linter-eslint 
nt JavaScript on the fly 


> Install 





图 1-11 安装 linter-eslint 


现在 Chrome 和 Atom 都 安装 好 了 ， 但 还 需要 做 一 些 完善 编码 环境 的 工作 : 访问 参考 文档 、 学 
习 命令 行 基础 知识 、 安 装 最 后 两 个 工具 。 
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1.3 ”文档 和 参考 资料 


前 端 开发 与 针对 iOS 和 Android 等 平台 的 开发 有 所 不 同 。 抛 开 显 而 易 见 的 差异 不 说 , 除了 技术 
规范 之 外 ,前端 技术 是 没有 官方 开发 者 文档 的 一 一 这 意味 着 需要 另 寻 他 处 ， 找 到 编码 指南 。 建 议 
你 熟悉 下 列 资源 ， 并 在 阅读 本 书 和 继续 前 端 开 发 的 过 程 中 养 成 经 常 查阅 文档 的 习惯 。 

Mozilla 开 发 者 网 络 ( MDN ) 是 HTML、CSS 和 JavaScript 最 好 的 参考 文档 , 可 以 通过 devdocs.io 
访问 。 这 是 一 个 优秀 的 文档 界面 ( 如 图 1-12 所 示 ), 它 从 MDN 上 拉 取 前 端 核心 技术 文档 ， 而 且 还 
能 在 离线 状态 下 查阅 。 








@e@ee [G|DevDocs API Documentat x 


一 [后 四 devdocs.io 站 国人 和 | 空 | 至 














| Q Search.. DevDocs Offline About News Tips 





> 目 css 





4 


回 DoM 
bp 加 DOM Events Welcome! Stop showing this message 


p 加 HTML DevDocs combines multiple API documentations in a fast, organized, and searchable 
* 党 HTTP interface. Here's what you should know before you start: 

» 略 JavaScript 1. To enable more docs, click Select documentation in the bottom left corner 
2. You don't have to use your mouse 一 see the list of keyboard shortcuts 


¥ DISABLED (83 
Sa 3. The search supports fuzzy matching (e.g. "bgcp" brings up "background-clip") 








谷 Angularjs 15.0 4. To search a specific documentation, type its name (or an abbreviation), then Tab 
op Apache HTTP Server 2.4.18 5. You can search using your browser's address bar — learn how 
站 Backbone.js 123 6. DevDocs works offline, on mobile, and can be installed on Chrome and Firefox. 
7. For the latest news, subscribe to the newsletter or follow @DevDocs 
GS Bower 17.1 
8. DevDocs is free and open source © star 8,047 
St 9. If you like the app, please consider supporting the project on Gratipay. Thanks! 
© C++ 
Happy coding! 
阅 Select documentation 





图 1-12 ”通过 devdocs.io 访 问 文档 


注意 ，Safari 目 前 尚 不 支持 devdocs.io 所 用 到 的 离线 缓存 机 制 ; 如 需 访问 ,可 使 用 Chrome 这 样 
的 浏览 器 。 

还 可 以 访问 MDN 的 官方 网 站 developermozilla.org/en-US ( 如 图 1-13 所 示 )， 或 在 搜索 引擎 中 
搜索 “MDN” 以 获取 所 需 信息 。 
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© © © ( [Document Object Model (- x [| 
€ SC | MozillaFoundation [US]|https://developer.mozilla.org/en-US/docs/Web/APlI/Document_Object_Model 空 | 三 
mozilla 
mn 四 
MD ML 
NETWORK WEB PLATFORM ~ MOZILLA DOCS ~ DEVELOPER TOOLS FEEDBACK ~ Q 


MDN 》 Web rechnology for developers > Web APls 》 Document Object Model (DOM) 
Pp om LANGUAGES @ BL 六 


Document Object Model (DOM) 国 国 同 园 王国 


see all contributors 


SEE ALSO 


IN THIS ARTICLE 中 
Document Object Model 
v Guides 
Events and the DOM 
Examples of web and XML The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a 
development using the DOM structured representation of the document (a tree) and it defines a way that the structure can be accessed from 
How to create a DOM tree programs so that they can change the document structure, style and content. The DOM provides a representation of the 


document as a structured group of nodes and objects that have properties and methods. Nodes can also have event 
handlers attached to them, and once that event is triggered the event handlers get executed. Essentially, it connects web 


Locating DOM elements using pages to scripts or programming languages. 
selectors 


Introduction to the DOM 


图 1-13 MDN 官 网 


另 一 个 需要 知道 的 网 站 是 stackoverflow.com ( 如 图 1-14 所 示 )。 严 格 说 来 ， 它 并 非 文 档 源 ， 而 





是 一 个 开发 者 讨论 社区 。 问 题 答案 的 质量 视 情 况 而 定 , 但 通常 非常 全 面 , 很 有 帮助 。 这 是 很 有 用 
的 资源 ， 但 需要 记 住 ， 因 其 众 包 特性 ， 答 案 并 不 具有 权威 性 。 


ooe 辣 Newest 'javascript’ Quest| x 
< 一 


je | 








CG [DD stackoverflow.com/questions/tagged/javascript 三 


Stack signup login tour help [javascript] 


仿 stackoverftow EI EI 





Tagged Questions info newest Efeatured frequent votes active unanswered 1 ,045， 130 
questions tagged 
JavaScript (not to be confused with Java) is a dynamic, weakly-typed language used for client-side as well as server-side javascript about > 


scripting. Use this tag for questions regarding ECMAScript and its various dialects/implementations (excluding 
ActionScript and Google-Apps-Script). Unless another tag for a … 
Related Tags 


learn more... top users synonyms (12) javascript jobs 


jquery * 358385 


himl x 191001 
0 Resume Download/Upload from where left off when network is resotred 
Te lneed to build a feature where the user can resume the download/upload of large file from where it was left 四 ”86466 
0 off when network is restored. | have to build client and server components. Clients may be ... 
php x73724 
ee javascript  , 鲁 android .net web-applications open-source asked 54 secs ago 
Deepak Garg angulars x 67166 
5 views 
5。2 ajax x 58908 
四 了 nodejs x 38797 
0 hammer-time.min.js contains undefined function hasTouchNone 
votes 人 这 下 1 > i ~ 总 去 html5 x 37459 


图 1-14 ”Stack Overflow 网 站 


Web 技 术 在 不 断 演进 。 随 着 时 间 推 移 ， 不 同 浏览 器 对 特性 和 API 的 支持 会 有 所 不 同 。 有 两 个 
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网 站 可 以 帮 你 判断 某 个 特性 被 哪些 浏览 器 〈 以 及 该 浏览 需 的 哪些 版 本 ) 所 支持 ， 





html5please.com 和 caniuse.com。 需 要 查询 特性 支持 程度 时 ， 





1.4 ”命令 行 速成 


命令 行 〈 或 称 为 终端 ) 的 使 





它们 是 


建议 使 用 html5please.com 查 询 该 特性 
是 否 被 推荐 使 用 ; 需要 了 解 浏览 器 的 哪些 版 本 支持 某 一 特性 时 ， 则 可 以 访问 caniuse.com。 


贯穿 全 书 ， 其 中 用 到 的 许多 工具 都 只 会 在 命令 行 中 运行 。 


要 在 Mac 上 访问 命令 行 ， 需 要 打开 Finder， 依 次 进入 Applications 、Utilities 文 件 夹 ， 找 到 并 打 


开 名 为 Terminal 的 程序 ( 如 图 1-15 所 示 )。 








Oe@e 国 Applications 
1 of 86 selected, 191.69 GB available 
Name ~ 
多 Time Machine 
Y | Utilities 


图 Activity Monitor 

Adobe Flash Player Install Manager 
AirPort Utility 

关 Audio MIDI Setup 

< Bluetooth File Exchange 

册 Boot Camp Assistant 

¥ ColorSync Utility 

项 Console 

@ Digital Color Meter 

贸 Disk Utility 

嘱 Grab 

Grapher 

妇 Keychain Access 

BB Logitech Preference Manager Uninstaller 
蚊 ，Migration Assistant 

BW Script Editor 

® System Information 


F- rerminal 


加 VoiceOver Utility 








民 x11 
图 1-15$ ”在 Mac 上 找到 Terminal 程 序 
然后 会 看 到 如 图 1-16 所 示 的 窗口 。 
@e@ee 全 chrisaquino 一 bash 一 56x8 





Last login: Mon Jan 4 12:89:83 on ttys903 
sl 


图 1-16 ”Mac 命令 行 


要 在 Windows 上 访问 命令 行 , 请 打开 “开始 ”菜单 ,搜索 “cmd”， 
Prompt 的 程序 ( 如 图 1-17 所 示 )。 





找到 并 打开 名 为 Command 








Best match 


Command Prompt 
Desktop app 


踢 My stuff DP Web 


cmd 








图 1-17 在 Windows 上 找到 Command Prompt 程 序 


点 击 即 可 运行 Windows 下 的 标准 命令 行 界面 ， 如 图 1-18 所 示 。 

















末 Command Prompt x 








图 1-18 ”Windows 命 令 行 


从 现在 起 , 将 用 “终端 ”或 “命令 行 ” 统一 指 代 Mac 的 Terminal 和 Windows 的 Command Prompt。 
若 不 熟悉 命令 行 的 使 用 ,下 面 会 介绍 一 些 常见 任务 的 命令 。 在 窗口 中 输入 命令 后 , 按 下 回 车 键 执 
行 命令 一 一 所 有 命令 都 是 如 此 。 


1.4.1 查看 当前 工作 目录 


命令 行 是 以 当前 位 置 为 基础 的 ， 这 意味 着 在 任意 给 定时 间 点 上 ， 它 总 会 “位 于 ”文件 结构 的 
特定 目录 中 ， 所 有 输入 的 命令 都 在 该 目录 中 执行 。 命 令 行 窗 口 显示 了 当前 目录 的 缩写 。 要 在 Mac 
上 查看 完整 路 径 ， 请 输入 pwd ( 即 print working directory， 打 印 工 作 目录 ) 命令 ， 如 图 1-19 所 示 。 





























@e@e DN chrisaquino 一 bash 一 56x8 
Last login: Mon Jan 4 12:09:93 on ttys0903 
$ pwd 

/Users/chrisaquino 

$ 














图 1-19 在 Mac 上 使 用 pwd 展 示 当 前 路 径 

















在 Windows 上 使 用 echo %cds 命 令 查 看 当前 路 径 ， 如 图 1-20 所 示 。 
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图 1-20 在 Windows 上 使 用 echo %cds 展 示 当 前 路 径 








1.4.2 ”新 建 目录 


前 端 项 目的 目录 结构 非常 重要 。 项 目的 增长 可 能 很 快 ,所 以 最 好 从 一 开始 就 保持 良好 的 结构 。 
在 开发 过 程 中 会 经 常 创建 新 目录 ， 通 过 mkdir ( 即 make directory,， 创建 目录 ) 命令 加 上 新 目录 名 
称 即 可 新 建 目录 。 

下 面 就 为 本 书 将 要 创建 的 所 有 项 目 新 建 一 个 目录 。 输 入 以 下 命令 : 

mkdir front-end-dev-book 

紧 接着 , 为 第 一 个 项 目 Ottergram 新 建 一 个 目录 , 该 项 目 会 在 下 一 章 介绍 。 要 创建 的 目录 是 刚 
新 建 的 front-end-dev-book 的 子 目录 。 因 此 , 在 主 目录 中 的 新 目录 名 前 面 加 上 父 级 目录 名 以 及 一 个 
斜 杜 (在 Mac 中 : 


mkdir front-end-dev-book/ottergram 


在 Windows 上 ， 请 使 用 反 斜 杠 : 


mkdir front-end-dev-book\ottergram 




































































1.4.3 ”切换 目录 


要 在 文件 结构 中 切换 目录 ， 请 使 用 cd ( 即 change directory ， 切 换 目 录 ) 命令 ， 其 后 加 上 要 进 
人 的 目录 路 径 。 

使 用 cd 命令 时 , 不 用 每 次 都 输入 完整 目录 路 径 。 例 如 ,要 进入 当前 目录 的 某 个 子 目录 时 ， 只 
需 该 子 目 录 名 称 即 可 。 当 处 于 front-end-dev-book 目 录 时 ，ottergram 目 录 的 路 径 就 是 ottergram。 

进入 新 项 目 目录 : 

cd front-end-dev-book 

现在 进入 ottergram 目 录 : 

cd ottergram 

要 进入 父 级 目录 ， 使 用 命令 cd ..( 即 cd 后 面 加 上 一 个 空格 和 两 个 句点 )。 两 个 句点 代表 父 
级 目录 的 路 径 。 


cd .. 
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记 住 ， 可 以 通过 pwd (在 Windows 上 是 echo scds ) 命令 查看 当前 目录 。 图 1-21 展 示 了 作者 新 -a 
建 目录 、 切 换 目录 和 查看 当前 目录 的 操作 。 


©@@® front-end-dev-book 一 bash 一 60x15 


$ mkdir front-end-dev-book 

$ mkdir front-end-dev-book/ottergram 

$ pwd 

/Users/chrisaquino/Projects 

$ cd front-end-dev-book 

$ pwd 
/Users/chrisaquino/Projects/front-end-dev-book 
$ cd ottergram 











$ pw 
/Users/chrisaquino/Projects/front-end-dev-book/ottergram 
$ cd 。。 

$ pwd 

/Users/chrisaquino/Projects/front-end-dev-book 


图 1-21 切换 、 查 看 目录 
每 次 切换 目录 不 限于 向 下 或 向 上 一 层 。 假 设 有 一 个 结构 更 复杂 的 目录 ， 如 图 1-22 所 示 。 








@e@e a Projects 
7 items, 217.19 GB available 
Name 入 Kind 
v Ml front-end-dev-book Folder 
v A coffeerun Folder 
» Ml scripts Folder 
» Ml stylesheets Folder 
v Ml ottergram Folder 
>» Ml scripts Folder 
» Ml stylesheets Folder 


图 1-22 ”文件 结构 示例 
假设 你 现在 在 ottergram 目 录 中 ， 想 要 切换 到 coffeerun 目 录 下 的 stylesheets。 这 可 以 通过 在 cd 
后 面 加 上 一 个 路 径 实现 , 该 路 径 表 示 “ 当 前 所 在 目录 的 父 级 目录 下 的 coffeerun 目 录 中 的 stylesheets 
目录 ”: 
cd ../coffeerun/stylesheets 
在 Windows 上 ,命令 是 相同 的 ， 但 要 用 反 斜 杠 : 


cd ..\coffeerun\stylesheets 





1.4.4” 列 出 目录 中 的 文件 


有 时 可 能 需要 查看 当前 目录 下 有 哪些 文件 ， 这 在 Mac 上 可 以 使 用 ts 命令 实现 (如 图 1-23 所 
示 )。 知 想 查 看 另 一 个 目录 下 的 文件 列表 ， 可 以 在 命令 后 面 加 上 相应 路 径 : 


ls 
ls ottergram 
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Oe@e 剧 front-end-dev-book 一 bash 一 80x7 
$ ls 

coffeerun ottergram 

$ ls ottergram/ 

index.html scripts stylesheets 

$ 目 











图 1-23 ”使 用 Ls 列 出 目录 中 的 文件 
若 目 录 为 空 ，Ls 默 认 不 会 打印 任何 内 容 。 








在 Windows 上 ， 对 应 的 命令 是 dir ( 如 图 1-24 所 示 )， 也 可 以 加 上 可 选 路 径 ; 


dir 
dir ottergram 

















画 Command Prompt 一 4 

















图 1-24 ”使 用 dir 列 出 目录 中 的 文件 
dir 命 令 会 默认 打印 出 日 期 、 时 间 、 文 件 大 小 等 信息 。 








1.4.5 ”获取 管理 员 权限 





在 某 些 版 本 的 OS X 和 Windows 上 , 可 能 需要 超级 用 户 或 管理 员 权 限 才 能 执行 一 些 命令 ( 如 安 


装 软件 、 修 改 受 保护 文件 等 )。 
在 Mac 上 ， 可 以 在 命令 前 加 上 sudo 获 取 权 限 。 首 次 使 用 sudo 时 ， 会 有 如 








图 1-25 所 示 的 警告 
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人 chrisaquino 一 sudo 一 72x10 





$ sudo ls 


We trust you have received the usual Lecture from the local System 
Administrator. It usually boils down to these three things: 


#1) Respect the privacy of others. 
#2) Think before you type. 
#3) With great power comes great responsibility. 


Password: 晶 


sudo 以 超级 用 户 身份 执行 


要 小 心 ， 别 输 错 。 





图 1-25 _ sudo 警告 

















命令 之 前 会 向 你 询问 密码 。 输 入 密码 时 不 会 显示 输入 的 内 容 , 因此 


在 Windows 上 获取 权限 是 在 打开 命令 行 界面 的 过 程 中 完成 的 。 在 Windows 的 开始 菜单 中 找到 





命令 行 选项 ， 鼠 标 右 键 点 击 ， 选 择 Run as Administrator ( 如 图 1-26 所 示 )。 
命令 都 是 以 超级 用 户 的 身份 








运行 的 ， 因 此 同样 要 当心 。 





chrisaquino Life at a glance 


-| command Prompt We speak Outiook 


Google Chr -人 pinto Start 


Atom 


Paint 


Mi 
2 2 奏 Unpin from taskbar 


[二 本 


Google Chrome Microsoft Edge Open file location 


Mostly Sunny Don't show in this list 


Get Started 


2 Dd NE 


Washington,... Phone Compa... OneNote 


贺 File Explorer 


地 Settings 
() Power 


江 Al apps 


m Cortana. Ask me anything. 


1.4.6 ”退出 程序 
在 学 习 本 书 的 过 程 中 ， 


但 也 有 些 应 用 在 手动 终止 之 前 会 保持 运 





图 1-26 ”以 管理 员 身 份 打开 命令 行 窗口 














你 会 通过 命令 行 运行 很 多 应 用 。 有 些 应 用 在 完成 任务 后 会 
行 。 要 退出 命令 行程 序 ， 使 用 Control + C 快 捷 键 。 








令 行 窗 口中 的 所 有 


自动 退出 ， 
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1.5 安装 Node.js 和 browser-sync 





这 是 开始 第 一 个 项 目 之 前 的 最 后 一 个 安装 步骤 了 。 

Node.js ( 简称 Node ) 允许 通过 命令 行 运行 用 JavaScript 编 写 的 程序 。 大 多 数 前 端 开 发 工具 
都 要 使 用 Nodejs。 第 15 章 会 介绍 更 多 关于 Node.js 的 内 容 ， 但 眼下 要 用 到 一 个 依赖 Nodejs 的 工 
具 browser-sync。 

知 要 安装 Node， 需 要 从 nodejs.org ( 如 图 1-27 所 示 ) 下 载 安 装 包 。 本 书 使 用 的 是 Node.js 5.11.1 
版 本 ,你 看 到 的 版 本 可 能 有 所 不 同 。 











ooe 大 Nodejs 


C= G https://nodejs.org/en/ 


n de 


HOME ABOUT DOWNLOADS DOCS FOUNDATION GET INVOLVED SECURITY NEWS 





Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses 
an event-driven, non-blocking /oO model that makes it lightweight and efficient. 
Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in 
the world. 


Download for OS X (x64) 


Vv4.2.4 LTS V5.3.0 Stable 
Mature and Dependable Latest Features 


Other Downloads | Changelog | API Docs OtherDownloads | Changelog | API Docs 


图 1-27 下 载 Node.js 


双击 安装 包 ， 根 据 提示 操作 。 

Node 自 带 两 个 命令 行程 序 : node 和 npm。node 的 工作 是 运行 JavaScript 程 序 , 在 第 15 章 之 前 还 
用 不 到 它 ; 而 另 一 个 程序 npm 则 会 在 在 线 安装 开源 开发 工具 时 用 到 。 

browser-sync 对 本 书 的 价值 不 可 估量 。 有 了 它 ， 示 例 代码 在 浏览 器 中 的 运行 将 更 加 方便 ; 修 
改 并 保存 代码 时 ， 浏 览 器 也 会 自动 重新 加 载 。 

在 命令 行 中 通过 下 面 的 命令 安装 browser-sync: 

npm install -g browser-sync 

(命令 行 中 的 -g 表 示 global， 即 全 局 。 以 全 局 方式 安装 此 工具 , 意味 着 可 以 在 任意 文件 夹 中 执 
行 browser-sync 命 令 。) 

运行 此 命令 时 所 处 的 目录 不 影响 结果 ， 但 可 能 需要 超级 用 户 权限 。 若 如 此 ， 在 Mac 的 命令 前 
加 上 sudo: 


sudo npm install -g browser-sync 
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若 在 Windows 上 ， 则 先 以 管理 员 身 份 打 开 命令 行 窗口 (前文 已 提 过 )。 ma 
从 下 一 章 启动 browser-sync 后 它 便 会 一 直 运 行 ,使 用 Control+ C 才 能 退出 。 完 成 一 个 项 目 之 后 ， 

最 好 退出 browser-sync。 在 本 书 的 前 两 个 项 目 (Ottergram 和 CoffeeRun ) 中 ， 开 始 工作 之 前 需要 局 

动 browser-sync。 


通过 前 面 的 介绍 和 操作 ，Ottergram 项 目 所 需 的 工具 已 经 准备 好 啦 ! 


1.6 ”延展 阅读 Atom 的 替代 工具 


可 供 选 择 的 文本 编辑 器 太 多 太 多 。 如 果 对 Atom 不 那么 感 兴趣 ， 在 跟着 本 书 完成 所 有 项 目 之 
后 ， 可 以 试 试 下 面 两 个 文本 编辑 器 。 它 们 在 Mac 和 Windows 平 台 上 都 可 以 免费 获取 ， 而 且 都 拥有 
大 量 插件 , 可 以 个 性 化 开发 环境 。 此 外 , 它们 和 Atom 一 样 , 都 是 由 HTML 、CSS 和 JavaScript 构 建 ， 
但 以 桌面 应 用 的 形式 运行 。 

Visual Studio Code 是 微软 为 Web 应 用 开发 量 身 定做 的 开源 文本 编辑 器 ， 可 通过 code. 
visualstudio.com 下 载 ( 如 图 1-28 所 示 )。 









































ooe DA Visual Studio Code - Code x 


€ G 和 https://code.visualstudio.com 


DA Visual Studio Code 


The VS Code December release is now available along with hundreds of cool extensions and themes! 


(@lele [<delldla 


ee lille 


d applic ble on you 


Download Code for OS X 





1-28 Visual Studio Code 官 网 


Adobe 的 Brackets 文 本 编辑 器 专长 于 用 HTML 、CSS 搭 建 UI。 它 还 提供 了 一 个 扩展 程序 ， 帮 助 
用 户 使 用 Adobe PSD 文 件 。 可 以 通过 brackets.io 下 载 Brackets ( 如 图 1-29 所 示 )。 
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© ® ， 回 Brackets -Amodern,oper x 
“7 © brackets.io 





回 Brackets 


Amodern,open Source text editorthat 
understands web design. 








图 1-29 ”Adobe Brackets 官 网 


开始 第 一 个 项 目 











访问 网 站 时 , 浏览 需 与 服务 需 之 间 会 进行 对 话 一 一 所 谓 的 服务 需 其 实 就 是 互联 网 上 的 另 一 


电脑 。 
浏览 





浏览 


服务 骨 : 
浏览 絮 : 
服务 骨 : 


服务 骨 : 





“你 好 ! 能 给 我 cat-videos.html 文 件 的 内 容 吗 ? ” 
“当然 ， 让 我 找 找 看 …… 找 到 啦 1” 


它 告诉 我 还 需要 男 外 一 个 叫 styles.css 的 文件 。” 


“好 ， 我 再 找 找 看 …… 找 到 啦 1” 
“好 吧 ， 这 个 文件 又 告诉 我 还 需要 一 个 文件 ， 它 叫 animated-background.gif。” 
“ 没 问 题 ， 我 再 找 找 啊 …… 找 到 啦 1” 




















对 话 在 一 段 时间 内 持续 进行 ， 有 时 会 持续 数 和 干 毫秒 〈 如 图 2-1 所 示 )。 


© 


1 

1 

<ldoctype html> 1 
<html> 1 
<head> 
<meta charset= "utf-8"> | 
1 

1 

1 

1 

1 

1 

1 





<title>Cat Videos!</title> 
</head> 1 


及 


响应 
图 2-1 浏览 器 发 出 请 求 ， 服 务 器 响应 














浏览 需 的 工作 是 向 服务 器 发 送 请 求 ， 解 释 从 服务 器 收 到 的 HTML 、CSS 和 JavaScript， 再 将 结果 


呈现 给 用 户 。 











一 个 网 站 的 用 户 体 验 与 HIML 、CSS 和 JavaScript 和 都 有 莫大 的 关系 。 假 若 将 网 站 比 作 生 



































物 ，HTML 就 是 骨骼 与 器 官 〈 结 构 )，CSS 是 皮肤 〈 可 视 层 )， 而 JavaScript 则 是 其 个 性 〈 行 为 举止 )。 
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本 章 将 使 用 基本 的 HTML 搭 建 第 一 个 项 目 Ottergram。 下 一 章 开 始 使 用 CSS， 第 4 章 则 用 其 进 
一 步 提升 体验 。 到 第 6 章 ， 再 加 入 JavaScript。 


2.1 搭建 Ottergram 











上 一 章 为 本 书 所 有 项 目 新 建 了 目录 ,同时 还 给 Ottergram 项 目 新 建 了 一 个 目录 。 启动 Atom 编 辑 
器 ， 点 击 File 一 Open (在 Windows 上 是 File 一 Open Folder ) 打开 ottergram 文 件 夹 。 在 对 话 框 中 ， 
找到 front-end-dev-book 文 件 夹 并 选择 ottergram。 点 击 Open , 告诉 Atom 使 用 该 文件 夹 ( 如 图 2-2 所 示 )。 








@ Open 
< 8 国 台 ,ol 要 -| | Ma front-end-dev-book ¢ Q 


Favorites Name ~ Size Kind 


了 MM ottergram — Folder 
Devices 


% Atom BE Edt Vew Selection Fin 
© New Window BN 
New File 








Add Project Folder... 
Reopen Last ltem 


Save 
Save As... 8S 
Save All 














Close Tab 
Close Pane 

Close Window 人 8W 
Close All Tabs 


Hide extension New Folder Cancel Open 


图 2-2 ”在 Atom 中 打开 项 目 文件 夹 


在 Atom 左 侧面 板 中 可 以 看 到 ottergram 文 件 夹 ， 这 块 面板 用 于 在 项 目 文 件 和 文件 夹 之 间 切 换 。 

接着 ,通过 Atom 在 ottergram 文 件 夹 下 新 建 一 些 文件 和 文件 夹 。 按 住 Control 键 ， 右 击 左 侧面 
板 的 ottergram， 在 弹出 菜单 中 点 击 New File 选 项 。 然 后 会 弹出 输入 新 文件 名 的 文本 框 ， 输 入 
index.html 并 敲 下 回 车 键 ( 如 图 2-3 所 示 )。 




















贸 Atom File Edit View Selection 
O00 /Users/c 
| Dittergrarm 。 mm 


> 惫 ottergram 


/Users/chrisaquino/front-end-dev-book/ottergram 












+ Enterthe path for the new file. 
New File index. htmtL 


New Folder 






Rename 
Duplicate 
Delete 


图 2-3 ”在 Atom 中 新 建文 件 














用 Atom 新 建文 件 夹 的 过 程 也 是 一 样 。 再 次 按 住 Control 键 ， 右 击 左 侧面 板 的 ottergram， 这 次 
在 弹出 菜单 中 点 击 New Folder 选 项 ， 然 后 在 弹 框 中 输入 stylesheets ( 如 图 2-4 所 示 )。 
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入 Atom File Edit View Selection ©Oee e index.html 一 /Users/chrisaquino/front-end-dev-book/ottergram 









gg@ © index.html 一 作 


v BM ottergram 
A New File 


stylesheets 
目 index.n New Folder 
Rename 
Duplicate 
Delete 











图 2-4 ”在 Atom 中 新 建文 件 夹 


最 后 ， 在 stylesheets 文 件 夹 中 新 建 名 为 styles.css 的 文件 按 住 Control 键 ， 右 击 左 侧面 板 中 的 
stylesheets 并 选择 New File， 弹 框 中 会 自动 填充 stylesheets/， 然 后 输入 styles.css 并 敲 下 回 车 键 (如 
图 2-5 所 示 )。 














留 Atom File Edit View Selection Oe@e e index.html 一 /Users/chrisaquino/front-end-dev-book/ottergram 
(RR e index.html 一 作 v BM ottergram 
> BM ottergram 


+ Enterthe path for the new file. 
v Ba stylesheets 


index.html 


llyesheets Search in Directory 


styLesheets/styLes.css 

国 index.html 

国 index.html New File 
New Folder 





Rename 





图 2-5 在 Atom 中 新 建 CSS 文 件 





完成 上 述 步 又 之 后 ， 项 目 文件 夹 应 该 如 图 2-6 所 示 。 





v 转 ottergram 


v BM stylesheets 


且 styles.css 
有 index.html 





图 2-6 ”Ottergram 项 目 初 始 结 构 


如 何 组 织 、 命 名 文件 和 文件 夹 并 无 定 则 ,不 过 Ottergram ( 和 本 书 中 其 他 项 目 一 样 ) 遵循 众多 
eed lane 在 index.html 中 存放 HTML 代 码 。 将 HTML 主 文件 命名 为 index.html 的 习 
惯 可 以 追溯 到 Web 发 展 早期 ， 这 项 约定 延续 至 今 
stylesheets 文 件 夹 正 如 其 名 ， 可 以 存放 一 个 或 多 个 Ottergram 项 目的 样式 信息 ( 即 Cascading 
Style Sheet，CSS， 层 芭 样 式 表 ) 文件 。 有 时， 开发 者 会 根据 文件 在 页 面 /站 点 中 适用 的 部 分 来 为 
其 命名 ， 如 headercss 、blog.css 等 。Ottergram 是 一 个 简单 项 目 ， 只 需要 一 个 CSS 文 件 ， 将 其 命名 
为 styles.css 以 表明 其 全 局 的 角色 。 


















































2.1.1 开始 写 HTML 


是 时 候 动笔 写 代 码 了 。 在 Atom 中 打开 index.html， 添 加 一 些 基 本 的 HTML。 
首先 输入 html，Atom 会 给 出 自动 补 全 提示 ， 如 图 2-7 所 示 。( 若 没 有 提示 ,请 检查 是 否 已 按照 
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第 1 章 的 指导 安装 了 emmet 插 件 。) 


index.html 


1 html 


htmtL 
index. htmtL 





图 2-7 Atom 的 自动 补 全 选项 








按 下 回 车 键 ，Atom 会 给 出 HTML 元 素 基本 框架 ( 如 图 2-8 所 示 )。 





index.html 


<!DOCTYPE html> 





图 2-8 ”自动 补 全 功能 创建 的 HTML 





现在 ,光标 在 文档 标题 的 起 始 标 签 <title> 和 闭合 标签 </title> 之 间 。 输 入 ottergram， 给 项 
目 取 一 个 名 字 ; 然后 将 光标 移 到 <body> 标 签 和 </body> 标 签 中 间 的 空 行 ， 输 入 header 并 按 下 回 车 
键 ，Atom 会 将 header 转 换 为 <header> 标 签 和 </header> 标 签 ， 中 间 有 一 行 空 行 (如 图 2-9 所 示 )。 





index.html 


<!DOCTYPE html> 


index.html 


<!DOCTYPE html> 


>ottergram< >ottergram</ 


</ 


headen| 


header ~ 








图 2-9 ”自动 补 全 功能 创建 的 header 标 签 
接 下 来 ， 输 入 hl 并 按 下 回 车 键 一 一 它 同 样 会 被 转换 成 标签 ， 但 这 次 没有 空 行 。 再 次 输入 
ottergram， 这 是 将 显示 在 网 页 中 的 标题 。 
这 样 一 来 ， 文 件 应 如 下 所 示 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
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<titLe>ottergram</titLe> 

</head> 

<body> 
<header> 

<hl>ottergram</h1> 

</header> 

</body> 

</html> 


Atom 和 emmet 帮 我 们 节省 了 不 少 打 字 的 时 间 ， 生 成 了 结构 良好 的 HTML 代 码 。 

来 看 看 代码 。 第 一 行 的 <1doctype htmL> 定 义 了 doctype ( 文档 类 型 )， 告 诉 浏览 器 当前 文档 
是 用 哪个 版 本 的 HTML 编 写 的 。doctype 不 同 ， 浏 览 器 泻 染 / 绘 制 的 页 面 可 能 也 略 有 不 同 。 在 这 里 ， 
doctype 的 意思 是 HTML5。 

更 早 的 HTML 版 本 的 doctype 通 常 又 长 又 复杂 ， 不 便于 记忆 ， 比 如 下 面 这 个 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


这 样 一 来 ， 每 次 新 建文 档 都 得 查 一 下 doctype。 

HTML5 中 的 doctype 变 短 了 ， 看 起 来 也 更 舒服 。 本 书 中 的 项 目 将 全 部 使 用 这 种 doctype ， 你 的 
项 目 也 应 该 使 用 它 。 

doctype 之 后 是 包含 head 和 body 的 一 些 基 本 HTML 标 记 。 

head 中 包含 文档 信息 , 以 及 浏览 器 如 何 处 理 文档 的 相关 信息 ， 比 如 说 文档 标题 、 页 面 使 用 的 
CSS/JavaScript 文 件 、 文 档 上 次 修改 的 时 间 等 都 包括 在 head 中 。 

head 中 的 <meta> 标 签 为 浏览 器 提供 文档 自身 信息 ， 如 文档 作者 姓名 、 搜 索引 擎 关键 词 等 。 
Ottergram 项 目 中 的 <meta> 标 签 <meta charset="utf-8"> 指 定 文档 由 包含 所 有 Unicode 字 符 的 
UTF-8 字 符 集 进行 编码 。 请 在 文档 中 使 用 该 标签 ， 以 便 多 数 浏览 器 能 正确 地 解释 代码 ， 特 别 是 在 
想 获 得 更 多 国际 流量 的 情况 下 。 

body 中 包含 所 有 代表 页 面 内 容 的 HTML 代码 : 页 面 中 出 现 的 所 有 图 片 、 链 接 、 文 本 、 按 钮 、 
视频 等 。 

多 数 标签 中 还 包含 其 他 内 容 。 看 看 刚 加 入 的 h1 标 题 ， 其 结构 如 图 2-10 所 示 。 























内 容 


| 


<h1>ottergram</h1> 


病 网 本 而 


起 始 标签 闭合 标签 


图 2-10 ”简单 HTML 标 签 结 构 示 意 
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HTML 指 的 是 “ 超 文 本 标记 语言 ”( Hypertext Markup Language )。 标 签 就 是 用 来 “标记 ”内 
容 的 ， 并 且 还 标明 其 用 途 〈 如 标题 、 列 表 项 、 链 接 等 )。 

一 组 标签 中 的 内 容 同 样 可 以 包含 其 他 HIML。 注 意 看 ， 在 上 面 的 代码 中 ，<header> 包 右 着 
<h1> 标 签 。( 还 有 <body> 中 包 庄 着 <header>! ) 

可 供 选择 的 标签 有 很 多 ,超过 140 个 。 可 以 通过 MDN 的 HTML element 参 考 文档 查看 ,地 址 是 
developer.mozilla.org/en-US/docs/Web/HTML/Element。 参 考 文 档 按 照 用 途 ( 如 文本 内 容 、 内 容 分 
节 、 多 媒体 等 ) 对 元 素 进行 分 组 ， 每 一 种 元 素 都 附 有 简介 。 


2.1.2 ”链接 到 样式 表 


第 3 章 将 在 样式 表 文 件 styles.css 中 编写 样式 规则 。 不 过 ， 还 记得 本 章 开 头 浏览 器 与 服务 器 之 
间 的 对 话 吗 ? 只 有 当 浏 览 器 被 告知 文件 存在 时 , 它 才 会 向 服务 器 请 求 该 文件 。 所 以 你 需要 链接 样 
式 表 ， 告 诉 浏览 器 去 请 求 它 。 更 新 index.html 中 的 head 部 分 ， 加 入 styles.css 文 件 的 链接 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ottergram</title> 
<link rel="stylesheet" href="stylesheets/styles.css"> 
</head> 
0 





























通过 <link> 标 签 , 可 以 给 HTML 文 档 附加 外 部 样式 表 。 它 有 两 个 属性 ,向 浏览 器 提供 更 多 关 
于 该 标签 用 途 的 信息 ( 如 图 2-11 所 示 )。( HTML 属 性 的 顺序 不 重要 。) 











<link rel="stylesheet” href="stylesheets/styles.css”> 


标签 属性 属性 














图 2-11 带 属 性 的 标签 结构 


将 rel ( 即 relationship ) 属性 设置 为 "styLesheet"， 让 浏览 器 知道 链接 的 文档 提供 的 是 样式 
信息 。href 属 性 告诉 浏览 器 向 服务 器 请 求 stylesheets 文 件 夹 下 的 styles.css 文 件 。 注 意 这 里 的 文件 
路 径 是 相对 于 当前 文档 的 。 

往 后 看 之 前 ， 记 得 先 保存 index.html。 


2.1.3 添加 内 容 


没有 内 容 的 网 页 ， 就 像 没 有 咖啡 喝 的 日 子 。 在 header 头 部 之 后 添加 一 个 列表 吧 ， 列 出 该 项 
目 存 在 的 理由 。 
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接 下 来 要 添加 一 个 无 序列 表 , 标签 是 <uL>。 列 表 中 包含 5 个 <Li> 列 表 项 ， 每 一 项 中 是 <span> 


标签 包 庄 的 文本 。 





更 新 过 的 index.html 如 下 所 示 。 注 意 ， 本 书 中 新 加 入 的 代码 都 会 用 粗 体 标 出， 需要 删除 的 代 
码 会 用 线条 划 去 ， 原 有 代码 以 普通 样式 显示 ， 以 便 读 者 更 容易 看 到 有 变动 的 地 方 。 

强烈 建议 充分 使 用 Atom 的 自动 补 全 和 自动 格式 化 功能 。 移 动 光标 ， 输 入 ul， 并 按 下 回 车 键 ; 
然后 输入 ii， 并 回 车 两 次 ; 接着 输入 span， 并 回 车 ; 输入 一 只 水 猎 的 名 字 ， 并 以 同样 方式 重复 4 次 








以 创建 另外 4 项 。 


<!doctype html> 
<htmL> 
<head> 
<meta charset="utf-8"> 
<titLe>ottergram</titLe> 





<Link rel="stylesheet" href="stylesheets/styles.css"> 


</head> 
<body> 
<header> 
<hl>ottergram</h1> 
</header> 
<ul> 
<Li> 
<span>Barry</span> 
</Li> 
<Li> 
<span>Robin</span> 
</Li> 
<Li> 
<span>Maurice</span> 
</Li> 
<Li> 
<span>Lesley</span> 
</Li> 
<Li> 
<span>Barbara</span> 
</Li> 
</UL> 
</body> 
</htmL> 


<1i> 标 签 中 骸 套 的 <span> 标 签 并 无 任何 特殊 意义 ， 























4 是 其 他 内 容 的 普通 容器 ， 在 Ottergram 





项 目 中 使 用 它们 是 出 于 样式 目的 。 随 着 本 书 的 展开 ， 你 将 会 看 到 其 他 的 容器 元 素 。 








再 往 下 ， 根 据 水 猿 的 名 字 添 加 图 片 。 


2.1.4 添加 图 片 








本 书 所 有 项 目 用 到 的 资源 都 可 以 通过 地 址 www.bignerdranch.com/downloads/front-end-dev- 

















Joe Robertson 和 Agunther 等 人 拍摄 ， 采 用 创作 共用 授权 。 
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下 载 、 解 压 资 源 ， 在 ottergram-resources 文 件 夹 中 找到 img 文 件 夹 ， 将 它 复 制 到 ottergram 项 目 
目录 中 。( 这 个 zip 文 件 中 还 包括 其 他 资源 ， 但 目前 只 需要 img 文 件 夹 。) 

除 标题 之 外 , 你 还 希望 列表 中 包含 可 点 击 的 缩 略图 。 可 以 给 ul 下 的 每 一 项 加 上 销 链 接 和 图 片 
标签 ， 到 时 候 我 们 会 详细 说 明 。( 如 果 使 用 了 自动 补 全 功能 ， 注 意 调整 </a> 标 签 的 位 置 ， 使 其 紧 
跟 在 </span> 之 后 。) 

















<UL> 
<li> 
<a href="#"> 
<img src="img/otterl.jpg" alt="Barry the Otter"> 
<span>Barry</span> 
</a> 
</li> 
<li> 
<a href="#"> 
<img src="img/otter2.jpg" alt="Robin the Otter"> 
<span>Robin</span> 
</a> 
</li> 
<li> 
<a href="#"> 
<img src="img/otter3.jpg" alt="Maurice the 0tter"> 
<span>Maurice</span> 
</a> 
</li> 
<li> 
<a href="#"> 
<img src="img/otter4.jpg" alt="Lesley the Otter"> 
<span>Lesley</span> 
</a> 
</li> 
<li> 
<a href="#"> 
<img src="img/otter5.jpg" alt="Barbara the Otter"> 
<span>Barbara</span> 
</a> 
</li> 
</ul> 





如 果 代 码 缩 进 不 是 很 整齐 ， 可 以 借助 此 前 安装 的 atom-beautify 插 件 。 点 击 Packages 一 Atom 
Beautify 一 Beautify ， 然 后 代码 就 会 缩 进 并 对 章 。 

来 看 看 又 新 增 了 哪些 东西 。 

<a> 是 锚 标 签 。 锚 标签 使 页 面 元 素 可 点 击 , 从 而 将 用 户 带 到 男 一 个 页 面 。 它们 通常 被 称 为 “ 链 
接 "， 但 请 注意 ， 这 和 之 前 用 到 的 <Link> 标 签 完全 是 两 回 事 。 

锚 标 签 有 一 个 名 为 href 的 属性 ,用 于 表明 锚 所 指向 的 资源 ， 其 值 通常 是 一 个 web 地址。 但 有 
时 候 你 并 不 想 去 别 的 地 方 (这 里 就 是 如 此 )， 所 以 将 “ 空 ” 值 # 赋 给 href 属 性 。 这 样 一 来 ， 点 击 
图 片 时 页 面 就 会 滚动 到 顶部 。 稍 后 会 实现 点 击 缩 略图 后 打开 大 图 的 效果 。 
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我 们 在 锚 标 签 内 部 添加 了 <img> ， 即 图 片 标 签 。 它 拥有 s rc 








属性 ， 值 为 之 前 添加 的 img 目 录 中 





的 文件 名 ; 还 添加 了 描述 性 的 att 属 性 ， 当 无 法 加 载 图 片 时 ，atlt 属 性 会 显示 其 所 含 文 本 。 此 外 ， 


读 屏 软件 可 以 将 alt 文 本 作为 图 片 描 述 告知 视 障 用 户 。 




















与 多 数 标签 不 同 ，<img> 标 签 不 会 包 衷 其 他 元 素 ， 而 是 指向 某 个 资源 。 当 浏览 器 遇 到 <img> 
标签 时 ， 会 在 页 面 上 绘制 图 片 ， 这 就 是 所 谓 的 可 蔡 换 元 素 ; 舱 入 的 文档 和 Java 小 程序 也 是 可 替换 





元 素 。 











因为 不 包 右 任何 内 容 或 元 素 ，<img> 标 签 不 存在 对 应 的 闭合 标签 ， 故 被 称 为 自 闭合 标签 ( 或 
空 标签 ) 有 时 你 会 发 现 <img src="otter.jpg" /> 这 样 的 写法 , 即 右 尖 括 号 之 前 多 了 一 个 斜 杠 。 
其 实 加 不 加 斜 杜 只 是 个 人 偏好 问题 ， 对 浏览 器 来 说 没有 区 别 。 本 书 使 用 不 带 斜 杠 的 自 闭合 标签 。 











保存 index.html， 很 快 就 能 看 到 代码 的 结果 啦 ! 


2.2 浏览 网 页 











要 查看 网 页 ， 就 需要 运行 第 1 章 安装 的 browser-sync 工 具 。 














打开 命令 行 ， 切 换 工作 目录 至 ottergram 文 件 夹 一 一 想 想 在 第 1 章 中 是 如 何 使 用 cd 命令 加 日 标 
文件 夹 路 径 切换 目录 的 。 获 取 ottergram 路 径 的 一 个 便捷 方法 是 按 住 Control 键 ， 右 击 Atom 左 侧面 
板 的 ottergram 文 件 夹 ， 选 择 Copy Full Path ( 如 图 2-12 所 示 )。 然 后 在 命令 行 中 输入 cd， 粘 贴 路 径 ， 








按 下 回 车 。 


v BM ottergram 
E New File 


”imo New Folder 


回 otterljpg 
Rename 


回 otter2.jpg Duplicate 
回 otter3.jpo 


| 


回 otters.jpg 


v BM stylesheets 


Add Project Folder 
和 Remove Project Folder 

国 index.html 

Copy Full Path 

Copy Project Path 

Open In New Window 

Search in Directory 


Show in Finder 











图 2-12 ”在 Atom 中 复制 ottergram 文 件 夹 的 路 径 


你 所 输入 的 路 径 应 该 如 下 : 


cd /Users/chrisaquino/Projects/front-end-dev-book/ottergram 


切换 完成 之 后 ,运行 下 面 的 命令 ， 以 便 在 Chrome 上 打开 Ottergram。( 为 适应 页 面 将 命令 分 为 





两 行 ， 实 际 应 当 在 一 行 中 输入 所 有 内 容 。) 


browser-sync start --server --browser "Google Chrome" 
--files "stylesheets/*.css, *.html" 
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车 Chrome 已 经 是 默认 浏览 器 ， 则 可 以 去 掉 --browser "Google Chrome" 这 部 分 : 


browser-sync start --server --files "stylesheets/*.css, *.html" 


该 命令 以 服务 器 模式 启动 browser-sync， 它 会 在 浏览 器 请 求 文件 时 发 送 响应 


index.html 文 件 时 )。 


以 上 命令 同时 还 告诉 browser-sync， 当 HTMIL 或 CSS 文 件 发 生 改动 时 ,自动 重 3 





这 大 大 提高 了 开发 效率 。 在 browser-sync 这 一 类 工具 
图 2-13 展 示 了 在 Mac 上 输入 命令 的 结果 。 





( 比如 当 创 建 


0 
动 都 需要 手动 刷新 页 





出 现 之 前 ， 每 次 变 


ottergram 一 node 一 80x24 





$ 1s 

ottergram 

$ cd ottergram/ 

$1s 

index.html stylesheets 


$ browser-sync start ~--server --files "stylesheets/*.css, *.html" 


[BS] Access URLs: 
Local: http://localhost:3000 
: http://192.168.29.137:3000 
UI: http://localhost:3001 
: http://192,168,29.137:3001 
[BS] Serving files from: ./ 
[BS] Watching files... 


图 2-13 ”在 Mac 命 令 


在 Windows 上 也 能 看 到 相同 输出 (如 





行 终端 中 启 


图 2-14 所 示 )。 


启动 browser-sync 





葬 Select Command Prompt - browser-sync start --server --files "stylesheets/*.css, *.html" 





图 2-14 在 Windows 命 令 和 


终端 中 局 





动 browser-sync 
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在 Chrome 中 成 功 加 载 Ottergram 页 面 以 后 便 可 以 看 到 页 面 中 的 ottergram 标 题 、 标 签 页 中 的 
ottergram 以 及 一 系列 水 猎 图 片 和 名 字 (如 图 2-15 所 示 )。 


四 由 由 ,Dueeomn 
€ DC (localhosta0 000 

















ottergram 








图 2-15 在 浏览 器 中 查看 Ottergram 


2.3 Chrome 开发 者 工具 


用 Chrome 内 置 的 开发 者 工具 (通常 被 称 为 DevTools ) 来 调试 样式 和 布局 等 再 好 不 过 了 ， 通 
过 开发 者 工具 调试 比 在 代码 中 试验 高 效 很 多 。DevTools 非 常 强大 ， 是 你 前 端 开发 之 路 上 的 忠实 
伙伴 。 

下 一 章 开 始 才 会 用 到 开发 者 工具 。 现 在 先 打 开 窗 口 ， 熟 悉 主要 区 域 。 

点 击 地 址 栏 右 侧 的 三 图 标 ， 选 择 More Tools 一 Developer Tools ( 如 图 2-16 所 示 )。 





























Save Page As... 
Add to Applications... 


Clear Browsing Data... 
Extensions 

Task Manager 
Encoding 


Developer Tools 





图 2-16 ”打开 开发 者 工具 
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开发 者 工具 默认 在 右 侧 显示 。 这 时 屏幕 看 起 来 应 该 如 图 2-17 所 示 。 























四 目 D onergram = 
€ 了 CGI Diocalhost3000 i | 本 7 三 
[Ee 是 Elements Console Sources Network Timeline Profiles Resources Security Audits x 
ottergram eit Styles Computed Event Listeners DOM Breakpoints » 
<html> 
* <head>..</head> , :hov 载 .cls 十 
< 本 == $0 
<script type="text/javascript" id= RE { 
-he seript. ">m</Script> 
<script async Src= | =- body { user agent stylesheet 
client,2,.11,1,.is script dispLay; block; 
» <header>.</header: margin: 8px; 
Pb <Ul>..« </ul> } 
</body> 
</htm\l> 
Bany him EE 
上 -一 Ra 攻 ， 1 上 1 
网 页 DOM 树 图 


样式 面板 
图 2-17 开发 者 工具 的 Elements 面 板 


开发 者 工具 展现 了 代码 与 其 生成 的 页 面 元 素 之 问 的 关系 , 通过 它 能 检查 单个 元 素 的 属性 、 样 
式 ， 也 能 即时 看 到 浏览 器 是 如 何 解 释 代 码 的 。 这 些 关系 对 开发 和 调试 都 至 关 重 要 。 
由 图 2-17 可 知 ， et eta ey 该 面板 又 可 以 分 为 两 部 分 : 
左 侧 是 DOM 树 图 ， 代 表 着 解释 为 DOM 元 素 ( Document Object Model， 即 文档 对 象 模型 ， 本 书后 
面 会 介绍 更 多 相关 内 容 ) 的 HTML; 右 侧 是 样式 面板 ， 展 示 应 用 于 元 素 的 视觉 样式 。 
在 工作 时 , 将 开发 者 工具 放 在 屏幕 右 侧 通常 比较 方便 。 若 需要 改变 其 位 置 , 请 点 击 右上 角 的 
; 按钮 ， 在 弹出 菜单 中 有 用 于 切换 开发 者 工具 位 置 的 按钮 ( 如 图 2-18 所 示 )。 
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Yetwork Timeline Profiles Resources Security Audits : Xx 


Styles Computed Event Listent¢ Dockside 串口 口 


Fliter 





Show console Esc 
bs_script_"> element. style { 
} Search all files 器 optF 
ser-sync- body { More tools > 
display: block; 

margin:j 8px; Shortcuts 

} Settings Fl 
Help 





图 2-18 ”切换 开发 者 工具 的 位 置 
一 切 准 备 就 纤 ， 下 一 章 开 始 添 加 样式 。 
2.4 延展 阅读 : CSS 版 本 


CSS 历 史 版 本 包括 标准 版 本 1、2 和 2.1。CSS2.1 之 后 ， 因 其 规模 不 断 增长 ， 标 准 被 分 成 多 个 
部 分 。 
CSS 版 本 3 并 不 存在 。 所 谓 的 CSS3 只 是 对 一 系列 模块 的 概括 性 称呼 ， 每 个 模块 都 有 自己 的 版 


表 2-1 CSS 版 本 : 真实 与 想象 

















版 本 号 ”发 布 年 份 显著 特性 
1 1996 基本 的 字体 属性 (font-family，font-style) 、 前 景色 与 背景 色 、 文 本 对 齐 、 外 边 距 、 
边框 、 内 边 距 
3 1998 绝对 定位 、 相 对 定位 、 固 定 定位 ， 新 增 字 体 属性 
2.1 2011 删除 了 一 些 很 少 有 浏览 器 实现 的 特性 
区 不 定 一 系列 不 同 规范 的 集合 ， 如 媒体 查询 、 新 增 选 择 器 、 半 透明 颜色 、@font-face 等 





2.5 延展 阅读 : favicon .ico 


你 注意 过 在 经 常 访问 的 网 页 的 地 址 栏 左 侧 有 一 个 小 图 标 吗 ?有 了 时候 这 些 图 标 也 出 现在 浏览 
器 标签 页 中 ， 如 图 2-19 所 示 。 





| 贺 Big Nerd Ranch - MobileA Xx ， 





图 2-19 ”bignerdranch.com 的 favicon.ico 


这 就 是 许多 网 站 都 有 的 乌 vicon.ico 图 片 文件 ， 浏 览 器 也 会 默认 请 求 这 种 文件 。 因 为 Ottergram 
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项 目 还 没有 添加 它 ， 所 以 你 可 能 在 开发 者 工具 中 会 注意 到 如 图 2-20 所 示 的 错误 信息 。 








息 目 全 /Doueroram 0 | 
3 © | 口 localhost:3000 三 
民品 Elements Console Sources Network Timeline » @1 x 
ottergram 
© 字 <top frame> 了 Preserve log 
: ey @ Failed to load resource: the server http://Tlocalhost:3000/favicon. ico 
和 responded with a status of 404 (Not Found) 


> 


图 2-20” 因 缺少 favicon.ico 而 报错 








P< 


如 果 出 现 错误 ， 请 不 用 担心 ， 这 不 会 对 项 目 产 生 影响 。 favicon.ico 添 加 起 来 很 容易 ， 这 是 我 
们 遇 到 的 第 一 个 挑战 。 


2.6 ”中 级 挑战 : 添加 favicon.ico 


相 比 于 错误 信息 , 你 肯定 更 乐于 看 到 水 猎 。 试 着 用 一 张 水 猎 照 片 制作 自己 的 favicon.ico 文 件 吧 。 

搜索 “favicon generator” 可 以 找到 一 堆 能 帮 你 转换 文件 的 网 站 。 它 们 多 半 需 要 你 上 传 图 片 ， 
然后 就 可 为 你 提供 一 个 自己 的 favicon.ico。 

选择 并 上 传 一 张 水 猎 照 片 吧 。 

将 favicon.ico 文 件 保存 到 index.html 所 在 的 文件 夹 。 最 后 ， 刷 新 浏览 器 ， 浏 览 器 标签 页 现在 应 
该 如 图 2-21 所 示 。 














El ottergram x 








图 2-21 为 项 目 添加 favicon.ico 之 后 





样式 








这 一 章 开始 设计 静态 版 的 Ottergram 项 目 ， 之 后 再 添加 交互 。 
本 章 完 成 后 的 网 页 效果 如 图 3-1 所 示 。 


口 ottergram x 党 
CD localhost:3000 冯 | ; 
OTTERGRAM 
== 一 3 





图 3-1 加 入 样式 后 的 Ottergram 


本 章 将 介绍 一 系列 的 概念 与 示例 。 若 读 完 后 感觉 似乎 并 未 掌握 所 有 知识 点 ， 大 可 不 必 担 心 ， 
因为 在 本 书 中 你 还 会 一 次 次 地 邂逅 它们 。 本 章 的 任务 是 为 你 理解 后 续 内 容 打下 坚实 的 基础 。 

当然 ， 这 里 介绍 的 内 容 仅 仅 是 CSS 的 皮毛 ， 你 可 以 查阅 MDN 了 解 所 有 属性 。 

前 端 开发 者 给 网 站 添加 样式 时 ， 常 面临 两 种 选择 ， 是 先 整体 后 局 部 ， 还 是 先 局 部 后 整体 。 

从 细节 入 手 进而 谋划 大 局 能 使 代码 更 加 整洁 , 复 用 性 也 更 高 。 这 种 工作 方式 被 称 作 原子 样式 
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( atomic styling )， 本 章 使 用 的 就 是 这 样 的 方式 一 一 首先 为 缩 略 图 添加 样式 ， 接 着 是 列表 布局 ， 下 





一 章 则 对 网 站 整体 进行 布局 。 


3.1 创建 基本 样式 


首先 将 normalize.css 文 件 添加 到 项 目 中 ，normalize.css 让 CSS 代 码 在 不 同 浏览 器 上 表现 一 致 。 
每 种 浏览 器 都 有 一 组 默认 样式 ， 却 不 尽 相 同 。 要 开发 网 站 或 应 用 的 自 定义 样式 ，normalize.css 是 





不 错 的 起 点 。 


可 以 在 线 获 取 免 费 的 normalize.css。 要 将 它 添加 到 Ottergram 也 无 须 下 载 到 本 地 ， 只 需 将 链接 


添加 到 index.html 即 可 。 
为 确保 使 用 的 normalize.css 是 最 新 版 本 ， 建 议 你 从 内 容 分 享 网 站 获取 文件 。 访 问 e 








dnjs.com/ 


libraries/normalize ， 找 到 以 .min.css 结 尾 的 文件 。( 该 文件 删除 了 多 余 的 空白 字符 ， 比 其 他 版 本 要 


小 一 些 。) 点 击 Copy 按 钮 复制 地 址 ( 如 图 3-2 所 示 )。 


©®@ /cnormalze-cdniscom-Th x \ 


所 CC [| cdnjs.com/libraries/normalize/# 











Orn on Cob =? 
cdnjs Browse Libraries About lssues Uptime Network Chat Requestalib 
normalize 


http://necolas.github.com/normalize.css/ 


EY TT FD mr 
Normalize.css makes browsers render all elements consistently and in line with modern 
standards. 


cross browser 


Version | 3.0.3 


https://cdnjs.cloudFlare.com/ajax/libs/normalize/3.0.3/normalize.css 


https://cdnjs.cloudfFlare.com/ajax/libs/normalize/3.0.3/normalize.min.css 


Related Tutorials 


Do you think w3schools sucks? Do you think you could do a way better job? 


Now you can! Submit your own community driven tutorials. 


图 3-2 ”从 cdnjs.com 获 取 normalize.css 的 链接 
创作 本 书 时 的 最 新 版 本 是 3.0.3， 目 前 的 版 本 可 能 更 高 。 




















判 的 地 址 。 





在 Atom 中 打开 ottergram 文 件 夹 , 并 打开 index.html。 添 加 <Link> 标 签 ,粘贴 刚刚 复 氏 
(下 面 代码 中 的 <Link> 标 签 被 分 为 两 行 以 适应 排版 ， 实 际 可 以 写 在 一 行 中 。) 


<!doctype html> 
<html> 
<head> 
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<meta charset="utf-8"> 
<titLe>ottergram</titLe> 
<Link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"> 
<link rel="stylesheet" href="stylesheets/styles.css"> 
</head> 


请 确保 normalize.css 的 <Link> 标 签 在 styles.css 的 <link> 标 签 之 前 ,浏览 器 需要 先 读 取 
normalize.css 中 的 样式 ， 再 读 取 自 定义 样式 。 ca 
这 样 就 完成 了 ， 不 需要 再 配置 其 他 东西 了 。 
可 能 有 人 好 奇 ， 使 用 的 地 址 怎么 是 其 他 服务 器 上 的 ? 实际 上 ， 对 HTML 文件 来 说 ， 这 再 正常 
不 过 了 【如 图 3-3 所 示 )。 








GET /cat-videos.html 


f 


ee— 


ee GET /normalize.css 


图 3-3 ”从 不 同 服务 器 请 求 资源 


刚刚 加 入 的 normalize.css 托 管 在 cdnjs.com 上 , 这 是 一 个 公共 服务 器 , 是 内 容 分 发 网 络 ( Content 
Delivery Network，CDN ) 的 一 部 分 。CDN 在 世界 各 地 都 有 服务 器 ， 每 台 服 务 器 上 都 有 相同 文件 
的 副本 。 用 户 发 出 请 求 后 , 将 通过 最 近 的 服务 器 返回 文件 , 减少 加 载 时 间 。cdnjs.com 上 托管 了 各 
种 版 本 的 前 端 流行 库 和 框架 。 


3.2 ”为 HTML 文件 添加 样式 


本 章 将 在 上 一 章 创建 的 styles.css 中 加 入 一 些 CSS 样 式 规则 。 添 加 样式 之 前 ， 需 要 为 HTML 添 
加 样式 “ 钧 子 ”。 

首先 ， 为 显示 水 猎 名 字 的 span 元 素 添 加 类 名 ， 将 这 些 元 素 标记 为 “ 缩 略图 标题 ”。 类 名 可 用 
于 标记 一 组 HTML 元 素 ， 通 常用 于 添加 样式 。 有 了 类 名 ， 为 水 猫 名 字 添 加 样式 就 很 方便 了 。 

在 index.html 中 为 Li 元 素 中 的 span 添 加 thumbnail-title 类 名 属性 ， 如 下 所 示 : 


: 
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<ul> 
<li> 
<a href="#"> 
<img src="img/otterl.jpg" alt="Barry the Otter"> 


<span class="thumbnail-title">Barry</span> 
</a> 
</li> 
<li> 
<a href="#"> 
<img src="img/otter2.jpg" alt="Robin the Otter"> 


<span class="thumbnail-title">Robin</span> 
</a> 
</li> 
<li> 
<a href="#"> 
<img src="img/otterl.jpg" alt="Maurice the Otter"> 
<span>Maurice</span> 
<span class="thumbnail-title">Maurice</span> 
</a> 
</li> 
<li> 
<a href="#"> 
<img src="img/otter4.jpg" alt="Lesley the Otter"> 
<shan>Lesley</span> 
<span class="thumbnail-title">Lesley</span> 
</a> 
</li> 
<li> 
<a href="#"> 
<img src="img/otter5.jpg" alt="Barbara the Otter"> 
<span>Barbara</span> 
<span class="thumbnail-title">Barbara</span> 
</a> 
</ul> 


很 快 就 可 以 用 刚 添 加 的 类 名 为 所 有 图 片 标题 添加 样式 了 。 
3.3 样式 的 构成 








通过 书写 样式 规则 创建 样式 。 样 式 规则 包括 两 部 分 ， 选 择 器 和 样式 声明 ， 如 图 3-4 所 示 。 




















样式 规则 的 第 一 部 分 是 一 个 或 多 个 选择 需 。 选 择 吉 描述 样式 将 应 用 了 











哪些 元 素 , 如 h1、span 


或 mg 等。 不 过 可 用 作 选 择 器 的 远 不 止 标 签名 ， 你 还 可 以 书写 一 些 能 提高 优先 级 的 选择 器 ， 将 样 


式 应 用 于 一 组 指向 更 明确 的 元 素 。 














名 选择 器 比 标签 选择 器 的 优先 级 高 。 





例如 ， 可 以 使 用 属性 作为 选择 器 ， 如 刚刚 为 <span> 标 签 添加 的 thumbnaitL-tittLe 类 名 。 类 
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电 
header footer { 
margin: 0; 
padding: 8px 4px; 
background: cornflowerblue; 
color: inherit; 


} 














声明 语句 
属性 名 ”属性 值 
图 3-4 ”样式 规则 的 结构 


优先 级 确保 样式 仅 应 用 于 特定 的 一 组 元 素 ( 试 比 较 拥 有 thumbnail-title 类 名 的 元 素 与 所 有 
<span> 元 素 )， 且 决定 了 选择 骨 的 相对 权重 。 若 样式 表 包 含 应 用 于 相同 元 素 的 多 个 样式 ， 将 会 应 
用 选择 器 优先 级 较 高 的 样式 。 在 本 章 末尾 的 延展 阅读 中 ， 你 可 以 了 解 到 更 多 关于 优先 级 的 知识 。 

本 章 会 介绍 不 同 种 类 的 选择 需 , 它们 在 优先 级 方面 有 所 不 同 。 在 样式 中 指向 相同 元 素 的 方式 
昌 然 很 多 ， 但 理解 优先 级 才 是 使 用 最 佳 选择 器 、 编 写 可 维护 样式 的 关键 。 

样式 规则 的 第 二 部 分 是 由 大 括号 包 右 着 的 样式 声明 , 它 定义 要 应 用 的 样式 。 每 一 条 声明 由 属 
性 名 和 属性 值 构 成 。 
编写 第 一 条 样式 规则 时 ， 使 用 刚 添 加 的 类 名 作为 选择 器 ， 为 水 猎 们 的 名 字 添 加 样式 。 


3.4 第 一 条 样式 规则 


要 在 样式 规则 中 将 类 名 作为 选择 器 ， 只 需 在 类 名 前 加 上 句点 即 可 ， 如 .thumbnaitL-titte。 
首先 为 .thumbnail-title 类 添加 背景 色 和 前 景色 。 
打开 styles.css， 添 加 样式 规则 : 


.thumbnail-title { 
background: rgb(96, 125, 139); 
color: rgb(202, 238, 255); 

} 


稍 后 会 介绍 更 多 关于 颜色 的 知识 ， 目 前 只 需要 看 看 发 生 的 变化 。 保 存 styles.css ， 确 保 
browser-sync 已 经 运行 。 若 需要 重新 启动 browser-sync， 请 使 用 如 下 命令 : 


browser-sync start --server --browser "Google Chrome" 
--files "stylesheets/*.css, *.html" 


网 页 会 在 Chrome 中 打开 ， 如 图 3-5 所 示 。 
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图 3-5 ”多 了 点 色彩 的 Ottergram 


可 以 看 到 ， 缩 略图 标题 的 背景 颜色 变 成 了 深蓝 色 ， 而 文字 颜色 变 成 了 浅 蓝 色 。 赞 ! 
继续 为 缩 略 图 标题 添加 样式 ， 如 下 : 


.thumbnail-title { 
display: block; 
margin: 0; 
padding: 4px 10px; 


background: rgb(96, 125, 139); 
color: rgb(202, 238, 255); 
} 
新 增 的 三 条 样式 声明 都 会 影响 元 素 盒子 。 对 于 每 个 可 见 的 HTML 元 素 ， 浏 览 器 都 会 在 页 面 中 
绘制 一 个 和 矩形。 浏览 需 使 用 一 种 名 为 标准 盒 模型 ( 简称 为 “ 盒 模型 ”) 的 方案 决定 这 些 和 矩形 的 大 小 。 
盒 模型 


为 理解 盒 模型 ， 可 以 打开 开发 者 工具 查看 一 番 。 保 存 styles.css， 切 换 到 Chrome， 并 打开 开发 
者 工具 ( 如 图 3-6 所 示 )。 
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© [ oam x EA 
CG OD localhost:3000 
0 Eements Console Sources Network Timeline Profiles Resources » 





ottergram iD0 
<html> 
bb <head>.</head> 
<body> 一 $0 
<script id="_ bs_script_ ">-</script> 
<script async src="/browser-sync/browser-sync-client.2.12.5.1s$"></script> 
*<header>-</header> 
p<ul class="thumbnail—list">..</ul> 
<div style-"display: block;"></div> 
</body> 
</html> 





html BE 
Styles Event Listeners DOM Breakpoints Properties 
Fikter :hov 人 .cls 十 ， 
element.style { 
body { normatizeminscss:1 
margin: > 0; 
} 
body { 
display: block; 


user agent stylesheet 


E 
Inherited from html 
ize。 :| = 
Mormelizes min. css:l 1| Fiter 目 Show al 


html { 
font-famity: sans-serif; 
“5-text-Size-a E Ipdisplay block 





图 3-6 “探索 盒 模型 
点 击 Elements 面 板 左上 角 的 QR 按钮 ， 即 检查 元 素 按钮 ， 并 将 光标 移 到 网 页 中 的 ottergram 单 词 


上 。 这 时 可 以 看 到 ， 标 题 周围 出 现 蓝 色 和 桃红 色 的 矩形 《如 图 3-7 所 示 )。 





© 0 otergram 


中 Elements 


CG OD localhost:3000 
i,) HD 
bp <head>..</head> 
Y<body> = $0 


图 3-7 ”光标 悬 停 在 标题 上 





点 击 单词 ottergram 后 ， 几 种 颜色 的 矩形 不 见 了 ， 元 素 被 选中 ，DOM 树 图 展开 ， 高 亮 显 示 相 


应 的 <h1> 标 签 。 
Elements 面 板 右 下 方 的 矩形 图 展示 了 hl 元 素 的 盒 模型 。 注 意 ， 图 示 某 些 部 分 的 颜色 与 之 前 检 


查 标题 时 看 到 的 矩形 颜色 是 相同 的 ( 如 图 3-8 所 示 )。 





图 3-8 ”查看 元 素 的 盒 模 型 
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一 个 元 素 的 盒 模型 由 四 个 部 分 组 成 (在 矩形 图 示 中 , 开发 者 工具 以 四 种 不 同 的 颜色 分 别 表示 
这 四 个 部 分 )。 





内 容 〈 蓝 色 ) 可 见 内 容 ， 就 是 文本 
内 边 距 (绿色 ) 内 容 四 周 透 明 的 部 分 
边框 ( 黄色) 可 将 环绕 内 容 和 内 边 距 的 部 分 设置 为 可 见 
外 边 距 ( 桃红 色 ) 边框 之 外 的 透明 部 分 





图 3-8 中 的 数值 单位 是 像素 ,1 像素 对 应 屏幕 中 显示 单一 颜色 的 最 小 矩形 区 域 。h1 元 素 的 内 容 
区 域 为 宽 197 像 素 、 高 54 像 素 的 区 域 (屏幕 大 小 不 同 , 看 到 的 值 也 可 能 不 同 )。 元素 左 侧 有 40 像 素 
的 内 边 距 ， 边 框 为 0 像素 ， 上 下 外 边 距 各 为 16 像 素 。 

这 个 外 边 距 从 何 而 来 呢 ? 每 个 浏览 器 都 提供 了 浏览 器 样式 表 , 在 HTML 文件 没有 指定 的 情况 
下 ， 为 HTML 元 素 提供 默认 样式 。 因 为 我 们 尚未 给 h1 元 素 盒 子 指定 任何 样式 , 所 以 使 用 默认 样式 。 

这 样 一 来 ， 就 可 以 理解 前 面 添加 的 样式 声明 了 : 

.thumbnail-title { 

display: block; 


margin: 0; 
padding: 4px 10px; 
































background: rgb(96, 125, 139); 
color: rgb(202, 238, 255); 


display: block 声 明 更 改 了 所 有 类 名 为 .thumbnail-title 的 元 素 的 盒子 ， 使 这 些 元 素 可 
以 占据 包含 它们 的 元 素 的 完整 宽度 。( 注意 在 图 3-6 中 , 缩 略 图 标题 的 背景 色 和 覆盖 了 更 宽 的 区 域 。) 
display 属 性 的 其 他 值 会 在 之 后 讲 到 ， 如 display: inLine 使 元 素 宽度 与 内 容 相 适应 。 

此 外 ， 我 们 还 将 缩 略 图 标题 的 margin 设 为 0，padding 设 为 两 组 不 同 的 值 : 4px 和 10px (px 
是 像素 的 缩写 )。 指 定 具 体 的 padding 值 ， 以 覆盖 浏览 器 默认 值 。 

padding、margin 和 其 他 一 些 样式 可 以 使 用 简写 属性 ， 即 将 一 个 值 应 用 于 多 个 属性 。 例 如 ， 
当 只 给 padding 提 供 两 个 值 时 , 第 一 个 值 作用 于 垂直 方向 (上 下 ), 第 二 个 值 作用 于 水 平方 向 ( 左 
右 ); 还 可 以 只 提供 一 个 值 ， 作 用 于 四 个 方向 ; 也 可 以 分 别 为 四 个 方向 指定 值 。 

概括 来 说 ， 新 加 入 的 样式 声明 意味 着 所 有 类 名 为 ,thumbnaitL-tittLe 的 元 素 的 盒子 将 会 撑 满 
容 需 宽度 ， 没 有 外 边 距 ， 上 下 padding 为 4px， 左 右 padding 为 10px。 


3.5 样式 继承 


下 面 来 添加 样式 ， 修 改 文本 大 小 和 外 观 。 
在 CSS 文 件 中 添加 新 的 样式 规则 ,为 body 元 素 设 置 字体 大 小 。 这 次 使 用 男 一 种 选择 器 一 一 元 
素 选择 器 ， 即 只 需要 使 用 元 素 名 即 可 。 
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body { 
font-size: 10px; 
} 


.thumbnail-title { 
display: block; 
margin: 0; 
padding: 4px 10px; 


background: rgb(96, 125, 139); 
color: rgb(202, 238, 255); 
} 
将 body 元 素 的 font-size 设 置 为 10px。 
样式 表 中 很 少 会 用 到 元 素 选择 器 ， 因 为 很 少 需要 给 文档 中 的 某 种 标签 全 部 设置 为 相同 样式 。 
再 者 ,元素 选择 器 限制 了 样式 的 复 用 性 一 一 使 用 元 素 选 择 器 后 , 很 可 能 到 样式 表 的 最 后 不 得 不 一 
直 重 复 相 同 的 声明 。 如 果 想 更 改 样式 ， 维 护 起 来 也 很 麻烦 。 
不 过 在 这 里 使 用 body 作 为 选择 器 正好 能 满足 优先 级 的 需要 。 一 个 文档 中 只 会 有 一 个 <body> 
元 素 ， 无 须 复 用 样式 。 
保存 styles.css， 在 Chrome 中 查看 页 面 (如 图 3-9 所 示 )。 


























©@ ， 口 ottergram © [Dh ottergram 
CGC DD localhosi C ND localhos 
ottergram 
ottergram 
































图 3-9 ”为 body 设 置 字体 大 小 后 的 效果 


主 标题 和 缩 略 图 标题 都 变 小 了 , 不 知 这 是 否 符合 你 的 预期 。 主 标题 直接 位 于 声明 字体 大 小 的 
body 元 素 中 ,而 缩 略 图 标题 却 被 舰 套 了 数 层 。 实 际 上 , 通过 样式 规则 , 包括 font -size 在 内 的 许 
多 样式 会 作用 于 指定 的 元 素 及 其 后 代 元 素 。 

文档 结构 可 以 用 树 形 图 来 描述 , 如 图 3-10 所 示 。 通过 树 形 图 展示 元 素 是 实现 DOM 可 视 化 的 不 
错 方式 。 

被 某 个 元 素 所 包含 的 元 素 被 称 为 后 代 。 这 里 所 有 的 span 都 是 body 的 后 代 ( ul 以 及 ti 也 都 是 )， 
所 以 它们 都 继承 了 body 的 font-size 样 式 。 

在 开发 者 工具 的 DOM 树 图 中 找到 并 选中 一 个 span 元 素 ， 在 Styles 面 板 中 可 以 看 到 标签 为 
Inherited from a、Inherited from li 、Inherited from ul 的 几 块 内 容 ， 这 三 个 部 分 展示 了 从 不 同 层级 中 
继承 的 浏览 器 默认 样式 。 在 Inherited from body 下 面 可 以 看 到 ， 在 styles.css 中 为 body 设 置 的 
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样式 





font-size 














header 





Elements 


民 是 


<html> 
Pp <head>..</head> 
了 <body> 
<Sscript id="__bs_script_">..</script> 
<script async SrCc="/browser-Ssync/browser-Ssync=- 
client,.2.12.5.1s"></script> 





html body ul i 


Console 


性 也 被 继承 了 ( 如 图 3-11 所 示 )。 























1i 


-一 


1i 








| 

















span 











span 


span span 

















图 3-10 ”Ottereram 的 树 形 结构 


Sources Network Timeline 


"Barry the Otter"> 


tle">Barry=</span 





图 3-11 


Profiles Application 





Security Audits 










Styles Computed Event Listeners DOM Breakpoints Properties 


Fiter 


element,. style { 
二 


.thumbnait-titte { 
display: block; 
margin:p0; 
padding:> 4px 10px; 
background:Pp 国 rgb(96, 125,139); 
color: 加 rgb(202, 238, 255); 
} 
Inherited from a 
a:-webkit-any-Link { 
Do obit lnk 
text-decoration: underline; 


cursor: auto; 
中 
Inherited from 1i 
必要 
display: List-item; 
text-align: -webkit-match-parent; 


Inherited from ul 

ul, menu, dir { 
display: block; 
list-style-type: disc; 
—webkit-margin-before: lem; 
-webkit-margin-after; 1lem; 
—webkit-margin-start: Qpx; 
—webkit-margin-end: Q@px; 
—webkit-padding-start; 48px; 





» 
Inherited from body 
body { 
font-size: 10px; 
Inherited from html 
html { 
font-family: sans-serif; 
A i just: 100%; 
} 


继承 祖先 元 素 的 样式 


:hov 作 .cls 十 


4 


styles.css:5 


user agent stylesheet 


user agent stylesheet 


user agent stylesheet 


styles.css:1 


normalize.min.css:1 
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如 果 在 男 外 一 个 层级 ( 如 ul 中 ) 设置 字体 大 小 , 会 是 什么 效果 呢 ? 层级 更 接近 祖先 元 素 , 样 
式 优 先 级 越 高 。 因 此 , 在 styles.css 中 为 uL 设 置 的 字体 大 小 会 覆盖 为 body 设 置 的 ,而 为 span 设 置 的 
大 小 则 会 覆盖 前 两 者 的 。 
在 DOM 树 图 中 点 击 册 元 素 可 以 动态 调试 样式 。 在 这 里 添加 的 样式 会 立即 反映 到 页 面 上 , 但 
不 会 影响 实际 项 目 文件 。 


在 样式 面板 顶部 , 可 以 看 到 标签 为 eLement.style 的 部 分 。 点击 大 括号 之 间 的 任意 位 置 即 可 
开始 添加 样式 ( 如 图 3-12 所 示 )。 





Styles Event Listeners DOM Breakpoints Properties 


Filter :hov 仿 .cls 十 


4 
element,.style { 


} 


图 3-12 ”添加 样式 
输入 font-size， 开 发 者 工具 会 弹出 提示 ( 如 图 3-13 所 示 )。 


[Es 闭 Elements Console Sources Network Timeline Profiles Resources » ; XxX 
nau To 


| Tfont 
[font- family 
|font= feature-settings 
|font-kerning 
|font-size 
font- stretch 
-font- -style | 
Sifont-variant Bakpoints Properties 
|font-variant- -Caps | | 
Te -ligatures :hov 侈 .cls | 
LIfont-weight | 


| fontHsize ; 
|} 


ul, menu, dir { 

display: block; 
list-style-type: disc; 
-webkit-margin-before: 1lem; 
-webkit-margin-after: lem; 
-webkit-margin-start: 0px; 
-webkit-margin-end: 0px'; 
-webkit-padding-start: 40px; 


图 3-13 ”样式 面板 自动 补 全 


选择 font -size 并 按 下 Tab 键 。 输 入 一 个 较 大 的 值 ， 如 5$0px， 然 后 按 下 回 车 。 你 可 能 需要 滚 
动 页 面 ， 不 过 已 经 可 以 看 到 ，ulL 已 将 body 的 font- size 样 式 覆 盖 ( 如 图 3-14 所 示 )。 


">-</Script> 
jwser-sync/browser-sync-cLient.2.12.5.js"></script> 








user agent stylesheet 
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© oergram x 怪 


GC D localhost:3000 a 





| Elements Console Sources Network Timeline Profles Resources » x 
一 一 rreoo 
了 <body style=" 


P<script id=" bs_script ">..</script> 

<script async src="/browser-sync/browser-sync-cLient.2.12.5.js"></script> 
bp <header>..</header> 
¥<ul style=" 


= html bo 〖 


| Styles Event Listeners DOM Breakpoints Properties 
| 















Filter :hov 代 .cls a 


|element. style { 
| 加 font-size: 50px; 
了 






jul, menu, dir { User agent stylesheet 
| display: block; 3 
list-style-type: disc; 
~webkit-margin-before: 1lem; 
. -webkit-margin-after: lem; 
~webkit-margin-start: Q@px; 
~webkit-margin-end: Qpx; 
-webkit-padding-start: 40px; 


图 3-14 ”ul 字体 大 小 设置 为 50px 


并 非 所 有 属性 都 能 继承 ， 比 如 border 就 不 行 。 想 知道 某 个 属性 是 否 可 以 继承 ， 请 查看 MDN 
相应 的 参考 页 面 。 

回 到 styles.css 中 。 找到 .thumbnaitL-titLe 类 , 更 新 样式 声明 , 使 用 稍 大 一 些 的 字号 覆盖 body 
的 font -size 样 式 。 


body { 
font-size: 10px; 
} 














.thumbnail-title { 
display: block; 
margin: 0; 
padding: 4px 10px; 


background: rgb(96, 125, 139); 
color: rgb(202, 238, 255); 


font-size: 18px; 
} 


将 .thumbnail-title 类 的 元 素 字 体 大 小 调整 至 18px。 
保存 styles.css， 再 去 浏览 器 中 看 看 效果 ( 如 图 3-15 所 示 )。 














图 3-15 ”更 新 样式 后 的 缩 略图 标题 
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看 起 来 不 错 ， 可 是 浏览 器 默认 样式 给 ,thumbnaitL-titte 类 元 素 加 上 了 下 划 线 。 这 是 因 
为 .thumbnail-title 类 和 ,thumbnail-image 类 的 元 素 都 被 包 于 在 <a> 标 签 中 , 因此 继承 了 下 划 

这 里 不 需要 下 划 线 ， 所 以 要 在 样式 文件 中 添加 新 的 样式 规则 ， 修 改 <a> 标 签 的 text- 
decoration 属 性 。 这 次 用 什么 选择 器 呢 ? 

如 果 确 定 要 为 缩 略图 标题 和 Ottergram 项 目 中 的 全 部 其 他 锚 元 素 移 除 下 划 线 ， 只 需 使 用 元 素 
选择 器 即 可 。 


a 1 
/* style declaration */ 
= 


(/*x *#/ 之 间 的 文本 是 CSS 注 释 ， 它 们 会 被 浏览 需 名 略 。 注 释 是 开发 者 留 下 的 笔记 ， 以 供 日 后 
参考 。) 
如 果 需 要 将 锚 用 于 其 他 目的 〈 并 且 使 用 不 同 的 样式 )， 可 以 像 这 样 添加 一 个 属性 选择 器 


a[hrefj]{ 
/* style declaration */ 
} 


上 面 的 选择 带 会 匹配 所 有 带 有 href 属 性 的 锚 元 素 。 锚 元 素 通常 都 有 href 属 性 ， 所 以 
这 样 可 能 还 无 法 精确 地 匹配 缩 略 图 和 缩 略图 标题 .可 以 通过 指定 属性 值 , 让 属性 选择 器 更 加 精确 ， 
如 下 : 


a[href="#"]{ 
/* style declaration */ 
} 


这 个 选择 器 现在 只 会 匹配 href 值 为 # 的 销 元 素 。 
男 外 ,还 可 以 单独 使 用 属性 选择 器 ， 有 无 属性 值 均 可 : 


[href]{ 
/* style declaration */ 


} 


根据 现实 情况 ，Ottergram 项 目 相 当 简 单 ,除了 缩 略 图 和 缩 略 图 标题 外 不 会 用 到 销 元 素 。 因 此 
使 用 元 素 选择 器 是 安全 的 ， 也 是 最 直观 的 ， 优 先 级 刚刚 好 。 
在 styles.css 中 添加 新 的 样式 声明 : 


body { 
font-size: 10px; 
} 














































































































al 
text-decoration: none; 


} 


.thumbnail-title { 


3 
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保存 文件 ， 查 看 浏览 需 。 下 划 线 已 经 消失 ， 缩 略图 标题 也 变 好 看 了 【〈 如 图 3-16 所 示 )。 


图 3-16 去掉 下 划 线 后 的 效果 


请 注意 ,不 要 移 除 普通 文本 ( 不 属于 显眼 的 主题 、 标 题 、 说 明 的 文本 ) 中 链接 的 下 划 线 。 下 
划 线 是 带 链接 的 文本 的 重要 视觉 指示 , 符合 用 户 心理 预期 。 去 掉 这 里 的 下 划 线 是 因为 缩 略 图 并 不 
需要 这 样 的 视觉 指示 ， 用 户 理所当然 地 认为 它们 是 可 点 击 的 。 

后 面 几 章 会 使 用 类 名 选择 器 为 缩 略 图 、 图 片 无 序列 表 、 包 含 缩 略 图 和 缩 略图 标题 的 列表 项 、 
头 部 等 元 素 添 加 样式 。 还 会 为 mndex.html 的 hl 、uL、Li 、img 这 些 元 素 添 加 类 名 ， 以 备 不 时 之 需 。 




















</head> 
<body> 
<header> 
<hl>ottergram</h1> 
<hl class="Llogo-text">ottergram</h1> 
</header> 
<ul> 
<ul class="thumbnail-list"> 
<ti> 
<li class="thumbnail-item"> 
<a href="#"> 
<img src="img/otterl.jpg' alt="Barry the 0tter"> 
<img class="thumbnail-image" src="img/otterl.jpg" alt="Barry the Otter"> 
<span class="thumbnail-title">Barry</span> 
</a> 
</li> 
<ti> 
<li class="thumbnail-item"> 
<a href="#"> 
i = jpg att=—"Robin the 0tter"> 
<img class="thumbnail-image" src="img/otter2.jpg" alt="Robin the Otter"> 
<span class="thumbnail-title">Robin</span> 
</a> 
</li> 
<ti> 
<li class="thumbnail-item"> 
<a href="#"> 
<img_ src="img/otter3.jpg' att='"Maurice the 0tter"> 
<img class="thumbnail-image" src="img/otter3.jpg" alt="Maurice the 0tter"> 
<span class="thumbnail-title">Maurice</span> 
</a> 
</li> 
<ti> 
<li class="thumbnail-item"> 
<a href="#"> 
—<img src="img/otter4.jpg'" alt="Lestley the 0tter"> 


<img class="thumbnail-image" src="img/otter4.jpg" alt="Lesley the 0tter"> 
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<Span class="thumbnail-title">Lesley</span> 
</a> 
</li> 
<li> 
<1li class="thumbnail-item"> 
<a href="#"> 
i = 5.jpg'" alt="Barbara the 0tteF"> 
<img class="thumbnail-image" src="img/otter5.jpg" alt="Barbara the Otter"> 
<span class="thumbnail-title">Barbara</span> 
</a> 
</li> 
</ul> 





类 名 添加 完成 后 ， 添 加 样式 就 会 方便 很 多 。 

应 尽量 使 用 类 名 选择 器 。 使 用 描述 性 较 强 的 类 名 能 够 使 代码 的 编写 和 维护 更 加 方便 。 此 外 ， 
还 可 以 为 元 素 添加 多 个 类 名 ， 提 高 灵活 性 。 

记得 保存 index.html1， 然 后 再 往 后 看 。 


3.6 ”图 片 自 适 应 


遵循 原子 样式 模式 , 接 下 来 为 图 片 添加 样式 。 不 过 因为 图 片 实在 太 大 了 , 所 以 除非 窗口 很 大 ， 
否则 它们 看 起 来 是 被 切断 的 。 为 .thumbnail-image 类 添加 样式 规则 ， 使 图 片 适应 窗口 。 


























af 
text-decoration: none ; 


} 


.thumbnail-image { 
width: 100%; 
} 


.thumbnail-title { 


} 

将 width 属 性 设置 为 100%, 将 图 片约 东 在 父 容 需 宽度 之 内 。 这 样 一 来 ， 当 浏览 融 变 宽 时 ， 
片 也 会 等 比例 变 大 。 保 存 styles.css， 切 换 到 浏览 器 ,调整 浏 览 器 窗口 大 小 。 可 以 看 到 图 片 随 着 浏 
览 器 窗口 变 大 缩小 ， 但 始终 保持 原始 比例 。 图 3-17 展 示 了 OoOttergram 在 宽 、 罕 窗口 下 的 样式 。 

靠近 细 看 ，.thumbnaiL-tittLe 元 素 周围 的 空白 不 见 了 ， 标 题 像 是 与 下 面 的 图 片 合 为 一 体 。 
在 styles.css 中 将 .thumbnaiL-image 的 dispLay 属 性 设置 为 bLock。 



































.thumbnail-image { 
display: block; 
width: 100%; 

} 
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©00 DD otegram x 3 OO@ oteoran x = 


GC D localhost:3000 将 GC D localhost:3000 安 | 千 





ottergram ottergram 





、 


图 3-17 图 片 宽度 自 适 应 
这 样 图 片 与 标题 之 间 的 空白 就 消失 了 ( 如 图 3-18 所 示 )。 























© otororm x 区 
CG D localhost:3000 re 
ottergram 人 Eements Console Sources Network Timeline Profies Resources Security Audits x 
et Styles Computed Event Listeners DOM Breakpoints 六 
<html> 
<head>.</head> Filter :hov 物 .cls +, 
a lement. style { 
p<script id="_bs_script_ ”></script> nt ye 
<script async src="/browser-sync/browser-sync-client.2.12.5,.]5"></script> 
<header>_</header> ‘thumbnail-image { styles.css?rel=..63009426537:20 
Y<utL class="thumbnail-list"> display: block; 
v<li class="thumbnail-item"> vidth: 00%; 
va href="# } 
<img class="thunbnail-inage” src="ing/otteri,jpg" alt="Barry the Otter"> img { normalize,min.css:1 
<span class="thumbnail-title">Barry</span> border:Po; 
</a> 站 
> Inherited from a 


p<li class="thumbnail-iter 
p<li class="thumbnoil-iter 
p<li class="thumbnail-item 
p<li class="thumbnail—iter 





ai-webkit-any-tink { user agent stylesheet 
color: -webkit-link; 
text-decoration: underline; 






cursor: autoi 


</ul> 
a ie Inherited from Li, thunbnail iten 
tg lif user agent stylesheet 


display: list-item; 
text-align: -webkit-match-parent; 


Inherited from | ul. thumbnail-list 
ul, menu, dir { user agent stylesheet 


html body ulthumbnaitlist fithumbnailitem a MER display: blocks 


图 3-18 为 .thumbnail-image 设 置 display: block 


为 什么 这 样 就 可 以 了 ? 实际 上 , 图片 默认 是 display: inLine 的 , 它们 的 泻 染 规则 类 似 于 文 
本 。 演 染 文 本 时 ， 字 母 是 沿 着 一 条 基线 绘制 的 。 某 些 字母 ， 如 p、q、y 等 ， 有 一 个 下 降 部 分 一 一 
也 就 是 位 于 基线 下 面 的 尾部 。 为 了 容纳 它们 ， 基 线 之 下 会 留 有 一 些 空白 。 

将 display 属 性 设置 为 DLock 就 可 移 除 空白 ， 因 为 此 处 再 无 需要 容纳 的 文本 ( 以 及 其 他 任何 
与 图 片 一 起 演 染 的 display: inLine 元 蔓 。 
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3.7 颜色 


该 学 习 颜 色 知识 了 。 为 body 元 素 和 .thumbnail-item 类 添加 颜色 样式 如 下 : 


body { 

font-size: 10px; 

background: rgb(149, 194, 215); 
} 


alt 
text-decoration: none; 


} 


.thumbnail-item { 
border: 1lpx solid rgb(100%, 100%, 100%); 
border: 1lpx solid rgba(100%, 100%, 100%, 0.8); 
} 


为 什么 给 .thumbnaitL-item 设 置 了 两 次 border 呢 ? 注意 ， 两 次 声明 使 用 了 略 有 不 同 的 颜色 
汕 数 : rgb 和 rgba。rgba 颜 色 函 数 接受 第 4 个 参数 ， 表 示 的 是 透明 度 。 不 过 有 些 浏览 器 并 不 支持 
rgba， 因 此 声明 两 次 是 一 种 提供 回 退 值 的 技巧 。 

所 有 浏览 器 在 看 到 第 1 条 声明 ( rgb ) 时 ， 都 会 将 其 值 注册 为 border 属 性 值 。 当 不 支持 rgba 
的 浏览 器 看 到 第 2 条 声明 时 , 会 直接 将 其 忽略 , 使 用 第 1 条 声明 中 的 值 。 支持 rgba 的 浏览 器 则 会 丢 
弃 第 1 条 声明 ， 并 使 用 第 2 条 声明 中 的 值 。 

( 好奇 为 何 body 的 背景 色 使 用 整数 而 .thumbnaitL-item 的 边框 颜色 使 用 百分数 吗 ? 稍 后 再 
讨论 这 个 问题 。) 


保存 样式 文件 ， 切 换 到 浏览 器 查看 效果 (如 图 3-19 所 示 )。 





© [oerram x 于 
CD localhost:3000 家 
| 民 Fements Console Sources Network Timeline Profies Resources Security Audits a 













Se Styles Computed Event Listeners DOM Breakpoints » 
em 
> <head>../head> Filter :hov 介 .cls 十 ， 
ETT7 
p< <script id="_ bs_script ">.</script> 

<script async srC="/browser-sync/browser-sync-client.2.12.5.js'></script> 
> <header>.</header> body { styles.css?rel=1463009775048:1 
v<ul class="thumbnail-list"> font-size: 10px; 

Vv<li class="thumbnail-item"> background:> 国 rgb(149, 194, 215); 


Y<a href="#'> 


element. style { 





<img class="thumbnail-image" src="img/otterl.ipg" alt="Barry the Otter"> |body { normalize.min.css:1 
<span class="thumbnail-title">Barry</span> margin: P 0; 
</a> } 
</Li> body { user agent stylesheet 
Vv<li class="thumbnail-item"> ipay: Bioeky 
va href="#'> SS px 
<img class="thumbnail-image” src="img/otter2, jpg" alt="Robin the Otter"> |} 
<span class="thumbnail-title">Robin</span> (htm 
i html { normalize, min. css:1 
vli class="thumbnail-item"> {ont Mont ys ta aera 
i rg A webkit-text-size-adiust: 100%; 
</li> . 


p<li class="thumbnail-item">..</li> 

P<li ctass="thumbnait-item'>-</Li> 

</ut 

<div style="display: block;"></div> 
| | </body> 

</html> 





html 
图 3-19 ”背景 色 与 边框 
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在 开发 者 工具 中 ， 可 以 看 到 Chrome 是 支持 rgba 的 。 第 1 条 声明 被 划 去 ， 表 明 没 有 使 用 rgb 颜 
色 ( 如 图 3-20 所 示 )。 








Styles Event Listeners DOM Breakpoints Properties 

Filter :hov 但 .cls 十 ， 
element. style { 

} : 
.thumbnail—item { Styles.css?rel=..62937793897:10 


Dordcr: 1px-Ss0tid rgb(188%; 100%; 180%); 
border:*1px solid [rgba(100%, 100%, 100%, 0.8); 








} 

LE user agent stylesheet 
display: list-item; 
text-align: -webkit-match-parent; 

由 


图 3-20 浏览 器 支持 rgba 颜 色 


在 开发 者 工具 中 选中 body。 注意 在 Styles 面 板 中 , 背景 颜色 值 的 左 侧 有 一 个 小 方块 展示 颜色 。 
点 击 方块 会 弹出 一 个 颜色 选择 工具 ( 如 图 3-21 所 示 ), 可 以 使 用 该 工具 选择 不 同 格式 的 颜色 值 。 


OY otteram x WX = 
GC D localhost:3000 从 | 到 
民间 Hements Console Sources Network Timeline Profies Resources Securty Audits 本 区 





Styles Computed Event Listeners DOM Breakpoints » 
t :hov 掀 .cls 十 ， 


<html> 
<head>-</h 


element, style { 


is"></script> 
bo ?rel=: 77 





本 ound: > 人 robtl49， 194, 215); 
} 






i clos "thumbnail-inage" in/otteriaiog" alt="Barry the 0tter 
class="thumbnail-title" Bar rry</span: 


se” i re -image" src= no/ottar2. pg" alt="Robin the Otter”> 
umbnail~title">Robin</span 





/人 ee |1 
Y<ULi ctass="thumbnait-item'> | oo 
人 和 -webkit-tel | 149 194 25 | | 1 





htmi 





图 3-21 Styles 面 板 中 的 颜色 选择 工具 


点 击 RGBA 值 右 侧 的 上 下 箭头 ， 为 背景 颜色 切换 不 同 的 颜色 格式 。 可 以 切换 的 格式 有 HSLA、 
HEX 和 RGBA。 

相对 于 其 他 格式 ，HSLA ( Hue Saturation Lightness Alpha， 即 色相 、 饱 和 度 、 明 度 、 透 明度 ) 
格式 用 得 较 少 ， 一 部 分 原因 是 多 数 流行 的 工具 都 没有 提供 精确 的 可 用 于 CSS 的 HSLA 值 。 如 果 对 
HSLA 感 兴趣 ， 可 以 访问 css-tricks.com/examples/HSLaExplorer。 

再 来 看 看 背景 颜色 的 HEX 值 : #95C2D7。HEX， 即 16 进 制 ( hexadecimal )， 是 最 早出 现 的 颜 
色 格 式 。 每 一 位 代表 着 0~15 之 间 的 值 ( 16 进 制 数 就 是 将 A ~ F 这 六 个 字符 也 当 作 数字 )， 这 样 每 一 
对 数字 就 可 以 代表 0~255 之 间 的 值 。 从 左 至 右 ， 每 一 对 数字 依次 代表 红 、 绿 、 蓝 三 种 颜色 的 强度 
(如 图 3-22 所 示 )。 
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#95C2D7 


红色 
绿色 
蓝 色 





图 3-22 HEX 颜色 值 国 
很 多 人 觉得 HEX 颜 色 不 够 直观 ， 还 有 一 个 选择 是 使 用 RGB (Red Green Blue, 红 、 绿 、 蓝 ) 
值 。 这 种 格式 的 每 种 颜色 依然 是 0~255 之 间 的 值 ， 但 使 用 10 进 制 数 表示 ， 按 照 颜色 分 开 。 如 前 所 
述 ， 更 先进 的 浏览 器 支持 提供 第 4 个 值 ， 指 定 颜色 透明 度 ， 取 值 范围 是 从 0.0 ( 完全 透明 ) 到 1.0 
( 完全 不 透明 )。 透 明度 的 正式 称谓 是 alpha， 也 就 是 RGBA 中 的 A。 这 里 body 背 景 颜色 的 RGBA 值 
是 (149，194，215，1) 。 
除 使 用 整数 值 外 ,还 可 以 使 用 百分比 , 像 前 面 .thumbnail-item 的 边框 那样 。 两 种 方式 在 功 
能 上 没有 差别 ， 但 不 要 将 整数 和 百分比 混在 一 起 使 用 。 
另外 ，Adobe 提 供 了 一 个 免费 的 在 线 工 具 帮 助 我 们 完成 配色 ， 网 址 是 coloradobe.com。 


3.8 调整 空白 


现在 的 Ottergram 项 目 中 已 加 入 了 一 些 漂亮 的 颜色 , 让 人 想起 水 猎 们 在 海洋 中 的 家 。 但 添加 颜 
我 们 发 现 .thumbnaitL-item 元 素 边框 的 内 部 出 现 了 一 些 并 不 需要 的 空白 。 还 有 些 讨厌 的 黑 






































也 会 影响 注意 力 。 
车 想 去 掉 这 些 黑 点 ， 只 需 将 ,thumbnail-list 的 List-style 属 性 设置 为 none 即 可 . 








.thumbnail-item { 
border: lpx solid rgb(100%, 100%, 100%); 
border: lpx solid rgba(100%, 100%, 100%, 0.8); 
} 


.thumbnail-list { 
list-style: none; 
} 


.thumbnail-image { 


去 掉 空 白 的 操作 和 前 面 对 .thumbnail-image 的 操作 一 样 。 每 个 .thumbnail-item 都 有 默认 
空白 以 适应 其 他 列表 项 ， 就 像 .thumbnail-image 元 素 通 过 空白 容纳 相 邻 文本 一 样 。 
为 ,thumbnail-item 添 加 display: block 声 明 ， 移 除 空白 。 


.thumbnail-item { 
display: block; 
border: lpx solid rgb(100%, 100%, 100%); 
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border: lpx solid rgba(100%, 100%, 100%, 0.8); 
} 





添加 这 些 之 后 ， 黑 点 和 多 余 的 空白 都 消失 了 ， 整 个 布局 也 更 优雅 ， 如 图 3-23 所 示 。 





图 3-23 ”改进 后 的 布局 


既然 不 需要 小 黑 点 , 那 为 何 选 择 带 黑 点 的 列表 呢 ?” 最 好 按照 实际 功能 , 而 非 浏 览 咒 默认 样式 
选择 HTML 标 签 。 现 在 这 里 需要 一 个 用 于 放置 图 片 的 无 序列 表 ，ul 就 是 合适 的 选项 。 在 第 4 章 为 
项 目 添加 大 图 的 时 候 , 我 们 会 为 凡 容 器 添加 样式 ,使 其 成 为 一 个 可 滚动 的 列表 。 默 认 情况 下 ， 浏 
览 器 使 用 带 黑 点 的 样式 展示 uL， 但 这 并 非 关 键 所 在 ， 要 去 掉 黑 点 也 很 容易 。 

接 下 来 需要 为 列表 项 之 间 添 加 空 阶 。 目 前 每 一 项 .thumbnail-item 元 素 之 间 并 没有 任何 空 
间 ， 下 面 为 相 邻 的 缩 略 图 添加 margin。 

不 过 ， 似 乎 并 不 需要 为 所 有 列表 项 添加 margin。 因 为 主 标题 已 经 有 了 margin， 因 此 第 一 项 
并 不 需要 。 这 也 意味 着 无 法 使 用 .thumbnail-item 类 名 选择 器 ， 至 少 无 法 单独 使 用 。 相 反 , 需要 
用 到 基于 元 素 间 关系 的 选择 器 语法 。 


关系 选择 器 


再 看 看 图 3-10， 看 起 来 很 像 家 族 树 ( family tree ) 吧 ? 根据 这 种 相似 关系 ， 产 生 了 一 系列 关 
系 选择 右 的 名 字 : 后 代 选 择 器 、 子 选择 器 、 兄 弟 选 择 器 、 相 邻 兄弟 选择 器 。 

关系 选择 融 由 两 个 选择 需 〈 如 类 名 选择 器 或 元 素 选 择 需 ) 和 一 个 连接 符 组 成 ,该 连接 符 决定 
了 两 个 选择 需 之 间 的 关系 。 为 理解 关系 选择 器 如 何 工 作 , 请 记 住 浏览 器 是 从 右 向 左 解析 选择 器 的 。 
来 看 几 个 例子 。 

后 代 选 择 器 匹配 特定 类 型 的 所 有 元 素 ,它们 是 男 一 类 型 元 素 的 后 代 元 素 。 比 方 说 ,要 选择 body 














元 素 所 有 的 后 代 span 元 素 ， 选 择 器 应 该 这 样 写 : 


body span { 
/* style declarations */ 
} 


这 里 没有 用 到 连接 符 , 因为 选择 器 从 右 向 左 解析 , 所 以 可 以 匹配 body 所 有 的 后 代 span 元 素 ， 
也 就 是 本 例 中 的 缩 略 图 标题 。 当 然 ， 也 会 匹配 到 可 能 添加 到 header 或 body 中 其 他 地 方 的 span 
元 素 。 

还 可 以 在 关系 选择 器 中 使 用 类 名 选择 器 (或 属性 选择 器 ， 力 至 任意 类 型 的 选择 器 )， 所 以 前 
面 的 代码 还 可 写成 下 面 这 样 : 


body .thumbnail-title { 
/* style declarations */ 
} 


子 选 择 器 匹配 特定 类 型 的 所 有 元 素 ， 它 们 是 另 一 类 型 元 素 的 直接 子 元 素 ， 连 接 符 是 >。 若 想 
使 用 子 选择 器 匹配 Ottergram 中 目前 所 有 的 span 元 素 ， 这 样 写 就 可 以 了 ， 


li > span { 
/* style declarations */ 









































} 


从 右 向 左 看 ， 选 择 器 匹配 所 有 父 元 素 为 Li 的 span 元 素 ， 也 就 是 缩 略 图 标题 。 
兄弟 选择 器 的 连接 符 是 ~-， 它 匹配 拥有 相同 父 元 素 的 元 素 。 但 由 于 关系 选择 器 的 定向 特质 ， 
结果 与 预期 可 能 有 所 出 人 。 请 看 下 面 的 例子 : 


header ~ ul { 
/* style declarations */ 








选择 器 匹配 所 有 位 于 header 后 面 的 ul 元 素 。 能 够 匹配 到 Ottergram 中 的 ul ， 是 因为 ul 前 面 有 
一 个 header 兄 弟 元 素 。 但 如 果 将 选择 器 倒 过 来 (ul ~ header )， 就 不 会 产生 匹配 结果 ， 因 为 ul 
后 面 没 有 任何 header 元 素 。 
最 后 一 种 关系 选择 器 是 相 邻 兄 弟 选 择 器 ,匹配 紧邻 指定 类 型 的 元 素 之 后 的 元 素 , 其 连接 符 为 +: 
Li+tLit{ 
/* style declarations */ 
} 


上 面 的 选择 器 会 选中 所 有 紧邻 Li 元 素 之 后 的 ti 元 素 。 结果 为 样式 会 作用 于 第 2 ~ 5 个 ti 元 素 ， 
因 第 1 个 ti 元 素 的 前 面 不 存在 其 他 ti 元 素 ， 所 以 不 会 对 其 产生 作用 。( 需要 留意 的 是 ， 因 目前 
Ottergram 项 目 结构 相对 简单 ， 普 通 兄弟 选择 器 和 相 邻 兄弟 选择 器 的 效果 是 完全 相同 的 。) 

回 到 手 上 的 任务 : 为 除 第 1 个 列表 项 外 的 所 有 列表 项 添加 顶部 margin。 假若 使 用 后 代 选 择 右 
或 子 选择 器 匹配 类 ,thumbnail-item 或 元 素 span、1li， 则 样式 会 作用 于 全 部 5 张 缩 略图 。 因 此 使 
用 相 邻 兄弟 选择 器 ， 为 一 张 缩 略 图 之 后 紧邻 的 另 一 张 缩 略图 添加 margin。 
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a 
text-decoration: none; 


} 

.thumbnail-item + .thumbnail-item { 
margin-top: 10px; 

} 


.thumbnail-item { 








保存 文件 ， 并 在 浏览 器 中 查看 结果 (如 图 3-24 所 示 )。 





©80 [ oeramn x 2 
CD localhost:3000 究 | $ 
民 后 FElements Console Sources Network Timeline Profiles Resources Securty Audits ; x 
Se Styles Computed Event Listeners DOM Breakpoints 六 
六 <head>~</head> Filter :hov 加 .cls 十 ， 
v <body 


P<script id="_ bs_script_ ">--/script> 


<script async src="/browser-sync/browser-sync-client.2.12.5.is"></script> 





p<header>..</header> 
ve<ul class="thumbnail-list"> 
v<li class="thumbnail-item"> 
Y<a href="#"> 


<span class="thumbnail-title">Barry</span> 
</a> 
</t> 
Y<ti class="thumbnail-item"> 
<a href="#"> 


<span class="thumbnail-title">Robin</span> 
</a> 
</\> 
Y<ti class="thumbnail-item"> 
P<a href="#"'>.</a> 
</U> 
Pp<li clLass="thumbnail-item">-</1i> 
p<li class="thumbnait-item'>-</1i> 
</utL> 
<div style="display: block;"></div> 
</body> 
</htmt> 





mr EE 


<img class-"thumbnail-image" src-"img/otterl.ipg" alt-"Barry the Otter"> |body { 


etement.styte { 


body { styles,css?rel=1463010331312;1 
font-size: 19px; 
background:* 画 rgb(149，194，215) ; 
} 
normalize.min.css:1 
margin: 8; 
body { User agent stylesheet 


display; block; 
Ferginiy SP 


<img class="thumbnail-image" src-="img/otter2.ipg" alt="Robin the Otter”> |} 


| Inherited from htnt 
html { normalize.min.css:1 
font-family; sans-serif; 


-webkst-text-size-adjust: 108%} 
} 





图 3-24” 相 邻 ,thumbnaitL- item 元 素 之 间 的 空隙 


细心 的 读者 可 能 注意 到 了 , 开发 者 工具 提供 了 一 种 简单 的 方式 查看 元 素 舱 套路 径 , 这 可 以 帮 
助 我 们 编写 关系 选择 器 。 点 击 某 个 Li 元 素 中 的 span,， 在 Elements 面 板 底部 就 能 看 到 元 素 路 径 ( 如 


图 3-25 所 示 )。 





p<li>.</li> 
p<li>.</li> 
</ul> 
</body> 
</html> 


jhtml body ul i EE 





图 3-25 ”在 Elements 面 板 中 查看 元 素 舱 套路 径 


改变 缩 略 图 列表 外 观 的 最 后 一 步 是 打开 styles.css ， 覆 盖 ul 从 浏览 器 默认 样式 继承 来 的 
padding， 让 图 片 不 再 缩 进 。 
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.thumbnail-list { 
list-style: none; 
padding: 0; 

} 





依然 还 是 保存 文件 ， 并 到 浏览 器 中 查看 效果 ( 如 图 3-26 所 示 )。 


© On oooram 


GD localhost3000 次 及 















民间 Elements Console Sources Network Timeline Profiles Resources Securty Audits x 


tm | Styles Computed Event Listeners DOM Breakpoints » 


> <head>~</head> | Fiter :hov 和 .cls 十 ， 
Y<body> 
script d="—bs_ seript—> ie 













<script async js"></script> 
rc ‘thumbnail-item + styles,css?rel=.63011008049:19 
:thumbnail-item { 


humbnail-item"> Sy margin-top: 10px; 


‘thumbnail-image” src="img/otterl,ipg" alt="Barry the Otter”"> | .thumbnait-item { Styles. css?rel=.,.63911998949: 14 
thumbnait-titten>Barry</span> display: blocks; 
border 








gb(1899%7 100% 909 于 
border: pa solid 
| jba( 100%, 100%, 100%, 0.8); 
if user agent stylesheet 





< ‘thumbnail-image” src="ima/otter2, jpg” alt="Robin the Otter"> 
pan class="thumbnail-title">Robin</span> 


splay list-iten; 
text-align: ~webkit-match-parent; 
3 


nail-item"> [inherited from [ul, thumbnail-list 

thumbnail-list { styles.css?rel=.63011008049;20 
Uist-style:P none; 

p<li ctass="thumbnait-item'>-</Li> padding: > 0; 

P<li class="thumbnail-item">,</li> } 


[ul menu, dir user agent stylesheet 
display: block; 


</ul> 
<div style="display: block;"></div> 
/body> 


</htmt> 


html body uithumbnaiHiet TTT 
图 3-26 去掉 padding 后 的 ul 


Ottergram 开 始 变 漂亮 了 。 再 为 头 部 添加 一 点 样式 ， 一 个 很 棒 的 静态 网 页 就 出 炉 了 。 
3.9 添加 字体 


前 面 为 hn1 元 素 添 加 了 .Logo-text 类 名 。 将 这 个 类 名 用 作 选 择 咒 ， 在 styles.css 中 添加 一 条 新 
的 样式 规则 ， 将 代码 插入 到 锚 标 签 样式 之 后 。( 通常 来 说 ， 样 式 顺序 不 同 只 会 在 同一 选择 器 存在 
多 条 规则 的 情况 下 产生 影响 。 在 Ottergram 中 ,样式 顺序 大 致 按照 元 素 在 代码 中 出 现 的 顺序 进行 组 
织 。 这 取决 于 个 人 偏好 ， 可 以 根据 自身 情况 自行 决定 。) 














af 
text-decoration: none ; 


} 


.logo-text { 
background: white; 


text-align: center; 


text-transform: uppercase; 
font-size: 37px; 


.thumbnail-item + .thumbnail-item { 
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首先 为 头 部 添加 日 色 


= 和 == 册 
月 时， 








然后 使 .Logo-text 元 素 中 的 文本 居中 显示 ， 再 通过 text- 
transform 属 性 将 文本 格式 调整 为 大 写 ， 最 后 设置 字体 大 小 。 图 3-27 展 示 了 修改 后 的 结 
©O@e 0 ‘ottergram x We = 
CGC QD localhost:3000 


去 | 苞 


OTTERGRAM 





图 3-27 ”为 头 部 添加 样式 
看 起 来 还 不 错 , 但 仅仅 只 是 不 错 。 对 可 爱 的 水 猎 们 来 说 ,这么 一 个 网 站 显得 有 些 普通 








让 网 页 更 酪 一些， 可 以 为 头 部 设置 一 种 不 是 浏览 器 提供 的 默认 样式 的 字体 。 


普通 。 为 了 
之 前 下 载 的 资源 文件 中 已 经 有 一 些 字体 文件 。 要 使 用 它们 , 请 将 fonts 文 件 夹 复制 到 项 目 目录 
下 ， 放 在 stylesheets 文 件 夹 中 ( 如 





图 3-28 所 示 )。 





图 3-28 ”将 fonts 文 件 夹 复 由 





出 到 stylesheets 文 件 夹 中 
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现在 只 需要 一 些 引用 这 些 字 体 的 样式 即 可 。 

资源 文件 中 包含 了 每 种 字体 的 多 种 不 同样 式 , 不 同 浏 览 需 厂商 支持 的 字体 类 型 也 不 一 样 。 要 
想 最 大 程度 上 文 持 各 类 浏览 需 ， 需 要 将 所 有 格式 都 放 到 项 目 中 。 没 错 ， 所 有 格式 。 
通过 @font-face 语 法 可 以 为 字体 添加 自 定义 名 称 ， 并 在 其 他 地 方 使 用 。 
@font-face 语 句 块 与 此 前 使 用 的 语句 块 有 些许 不 同 ， 它 主要 包括 3 部 分 。 
口 首先 是 font-family 属性 ， 其 值 是 用 于 标记 自 定义 字体 名 称 的 字符 串 ， 在 整个 CSS 文 件 
中 都 能 使 用 。 
口 其 次 是 一 些 src 声 明 ， 指 定 不 同 的 字体 文件 。( 请 注意 ， 顺 序 非常 重要 ! ) 
口 最 后 是 修改 字体 样式 的 声明 ， 如 font-weight 和 font -stytLe 等 。 

在 styles.css 文 件 顶部 为 Lakeshore 字 体 添 加 afont- face 声明， 并 在 .Logo -text 类 中 添加 使 
用 新 字体 的 样式 声明 。 


@font-face { 

font-family: 'lakeshore'; 

src: url('fonts/LAKESHOR-webfont .eot'); 

src: url('fonts/LAKESHOR-webfont .eot?#iefix') format('embedded-opentype'), 
url('fonts/LAKESHOR-webfont.woff') format('woff'), 
url('fonts/LAKESHOR-webfont.ttf') format('truetype'), 
url('fonts/LAKESHOR-webfont.svg#lakeshore') format('svg'); 

font-weight: normal; 

font-style: normal; 







































































} 


body { 

font-size: 10px; 

background: rgb(149, 194, 215); 
让 


a 
text-decoration: none; 


} 


.logo-text { 
background: white; 


text-align: center; 
text-transform: uppercase; 
font-family: lakeshore; 
font-size: 37px; 

} 


不 得 不 承认 , 将 @font-face 声 明 写 正确 的 确 有 些 麻烦 ,因为 每 个 url 值 的 顺序 很 重要 。 将 这 
段 声 明 复 制 下 来 作为 使 用 时 的 参考 倒是 个 不 错 的 主意 。 还 可 以 通过 flight-manual.atom.io/using- 
atom/sections/snippets 查 看 Atom snippets 文 档 ， 学 习 如 何 创建 自己 的 代码 片段 或 模板 。 

声明 自 定 义 @font-face 后 在 CSS 其 余部 分 中 的 font-family 属 性 中 就 可 以 使 用 Lakeshore 
这 个 值 。 请 在 样式 声明 中 使 用 font -famiLy: Lakeshore 为 ,Logo-text 设 置 新 字体 。 
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保存 styles.css， 切 换 到 Chrome， 欣 赏 这 和 水 猎 一 样 酷 的 网 页 吧 (如 图 3-29 所 示 )。 


DD ottergram x EA 
CGC ND localhost:3000 BB: 
= 
oTERGRAM 





3.10 ”初级 挑战 ， 更 改 颜色 


修改 body 的 背景 颜色 ， 试 着 用 开发 者 工具 中 的 颜色 选择 器 (如 图 3-21 所 示 ) 选择 一 种 颜色 。 
访问 color.adobe.com 可 以 使 用 更 精致 的 调 色 板 ， 为 body 和 .thumbnail-title 创 建 属于 你 的 


背景 色彩 组 合 。 


3.11 ”延展 阅读 : 优先 级 ! 当选 择 器 发 生 冲突 了 …… 


前 面 已 经 讲解 过 如 何 履 盖 样 式 了 ， 例 如 在 styles.css 前 引入 normalize.css。normalize.css 中 的 样 
式 会 成 为 浏览 器 基准 ， 而 自 定义 样式 又 优先 于 基准 样式 。 
这 是 浏览 器 如 何 为 页 面 中 的 元 素 选 择 样 式 的 最 基本 概念 ， 在 前 端 开发 中 通常 被 称 为 就 近 原 
则 : 当 浏 览 需 处 理 CSS 规 则 时 ,可 能 会 覆盖 之 前 处 理 过 的 规则 。 通 过 改变 <Link> 标 签 的 顺序 即 可 
控制 浏览 器 处 理 CSS 的 顺序 。 








六 
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当 样 式 规 则 选择 器 相同 时 ( 比如 CSS 和 normalize.css 为 body 元 素 添加 了 不 同 的 margin ), 就 上 
当 简 单 了 ， 浏览 器 会 选择 最 近 的 样式 声明 。 那 如 果 有 多 个 选择 右 匹 配 同一 个 元 素 又 会 怎样 呢 ? 
假设 在 Ottergram 中 有 这 样 两 条 CSS 规 则 : 


.thumbnail-item { 
background: blue; 
} 














LT 
background: red ; 


} 

两 种 方式 都 匹配 <Li> 元 素 ， 那 么 <Li> 元 素 会 是 什么 颜色 ? 虽然 Li { background: red; } 
在 后 面 ， 但 起 作用 的 还 是 ,thumbnaiL-item { background: blue; }。 为 什么 呢 ? 因为 类 名 选 
择 器 比 元 素 选 择 器 优先 级 高 ( 也 就 是 说 权重 更 高 )。 

类 名 选择 器 和 属性 选择 器 的 优先 级 相同 ， 都 高 于 元 素 选择 器 。 优 先 级 最 高 的 是 ID 选择 器 ,， 日 
前 尚未 介绍 。 如 果 为 某 个 元 素 添 加 了 id 属性 ， 则 可 使 用 优先 级 最 高 的 ID 选择 回 。 

ID 属性 与 其 他 属性 很 相似 ， 示 例如 下 : 


<li class="thumbnail-item" id="barry-otter"> 


ID 选 择 器 是 在 ID 前 面 加 上 #: 


.thumbnail-item { 
background: blue; 
} 


















































#barry-otter { 
background: green; 
} 
Li 
background: red ; 
} 
上 面 例子 中 的 3 个 选择 器 均 可 匹配 <Li> 元 素 , 但 因 卫 选择 器 优先 级 最 高 ,所 以 <Li> 背 景 为 绿 
又 因为 选择 器 优先 级 各 不 相同 ， 所 以 规则 顺序 不 会 影响 结果 。 
请 记 住 一 点 : 最 好 不 用 ID 选择 器 。 在 文档 中 ， 卫 值 是 唯一 的 ， 所 以 不 能 再 为 其 他 元 素 设置 
id="barry-otter"。 尽 管 ID 选择 器 优 先 级 最 高 ， 但 与 其 相关 的 样式 难以 复 用 ， 进 而 成 为 代码 维 
护 中 的 “最 糟 实践 ”。 
要 了 解 更 多 关于 优先 级 的 内 容 ， 请 访问 MDN : developer.mozilla.org/en-US/docs/Web/CSS/ 
Specificity。 
specificitykeegan.st 的 优先 级 计算 器 是 一 个 计算 不 同 选 择 器 优先 级 的 便利 工具 。 打 开 看 看 ,了 
解 选择 器 优先 级 到 底 是 怎么 计算 的 。 
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前 端 开发 者 的 任务 之 一 人 同 设备 和 浏览 器 的 用 户 提 供 最 佳 体验 。 

但 这 并 非 从 一 开始 就 是 业界 共识 ,浏览 器 厂商 对 此 负 有 部 分 不 可 推 钙 的 责任 。 在 Web 发 展 早 
期 , 各 厂商 之 间 便 展开 大 战 ， 竞 相 推 出 不 标准 的 新 特性 ， 试 图 超越 对 手 。 为 此 ，Web 开 发 者 得 想 
出 各 种 对 策 , 检测 请 求 文档 的 是 哪 种 浏览 器 ,使 用 的 屏幕 分 辨 率 是 多 少 。 然 后 基于 这 些 信息 , 为 
不 同 浏览 器 提供 不 同 版 本 的 文档 。 

可 翡 的 是 , 要 想 针对 特定 分 状 率 下 特定 版 本 的 浏览 器 ,就 需要 为 网 站 的 每 个 页 面 创建 一 个 特 
定 的 版 本 。 这 使 得 前 端 开 发 负重 不 堪 ， 维 护 起 来 耗 时 耗 力 ， 令 人 诅 丧 。 

谢 天 谢 地 , 浏览 器 大 战 终于 结束 了 , 各 大 厂商 正 努 力 遵循 同一 套 规范 一 一 现代 前 端 开发 者 们 
终于 可 以 安心 地 只 编写 一 套 代 码 ， 为 不 同 版 本 的 浏览 器 提供 不 同 页 面 的 日 子 一 去 不 返 。 然 而 , 这 
并 不 意味 着 不 再 需要 为 不 同 尺 寸 、 方 向 的 显示 器 定制 页 面 。 一 些 新 技术 ， 如 本 章 将 要 学 习 的 
flexbox ， 人 允许 根据 用 户 屏 幕 尺 寸 进行 布局 调整 ， 而 无 须 重 复 的 文档 。 

本 章 会 将 Ottergram 由 简单 的 图 片 列表 拓展 为 可 交互 用 户 界面 。 通过 flexbox 和 CSS 定 位 ,可 以 

创建 一 组 界面 组 件 ， 它 们 根据 浏览 器 窗口 尺寸 进行 调整 ， 并 保持 总 体 布局 不 变 。 等 到 本 章 结 束 ， 
Ottergram 会 包含 一 个 缩 略 图 滚动 列表 和 一 个 单 张大 图 展示 区 域 ( 如 图 4-1 所 示 )。 











OO [own 


€ YC localhost3000 | 刁 





图 4-1 flex 布 局 的 Ottergram 
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工作 分 两 步 进行 ;首先 添加 一 些 必要 的 标记 和 样式 , 用 于 展示 大 图 并 使 缩 略图 变 小 且 可 滚动 ; 
接着 添加 一 些 样式 ， 使 窗口 部 分 能 够 伸缩 ， 以 适应 不 同 尺寸 的 屏幕 和 窗口 。 


4.1 界面 拓展 


自从 让 hone 面 世 ， 使 用 智能 手机 替代 台式 机 、 笔 记 本 访问 网 络 的 趋势 节 节 高 升 。 

对 前 端 开 发 者 而 言 ， 这 种 趋势 证 实 了 移动 优先 是 最 佳 的 设计 方法 : 先 为 小 屏幕 进行 设计 , 接 
着 是 手持 设备 屏幕 ， 最 后 是 台式 机 屏幕 。 

Ottergram 的 简单 布局 已 是 移动 端 友 好 型 , 适合 在 较 小 的 屏幕 上 显示 文本 和 图 像 , 因此 可 以 直 
接 进 行 下 一 步 布局 。 

采用 垂直 滚动 列表 虽 未 誉 不可, 但 如 果 还 能 让 用 户 看 到 大 图 会 更 好 。Ottergram 计 划 在 展示 大 
图 的 同时 ， 使 缩 略 图 列表 水 平 滚动 。 目 前 先 将 大 图 放 在 列表 下 面 ， 如 图 4-2 所 示 。 
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图 4-2 ”Ottergram 的 新 布局 
先 从 添加 大 图 开始 吧 。 


4.1.1 添加 大 图 


目前 先 将 大 图 设置 为 固定 的 一 张 图 。 在 第 6 章 中 将 会 添加 功能 ， 使 我 们 在 点 击 缩 略图 时 能 够 
切换 大 图 。 
在 index.html 中 添加 一 段 代 码 用 来 展示 大 图 : 


<li class="thumbnail-item"> 
<a href="#"> 
<img class="thumbnail-image" src="img/otter5.jpg" alt="Barbara the Otter"> 
<span class="thumbnail-title">Barbara</span> 
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</a> 
</li> 
</ul> 


<div class="detail-image-container"> 
<img class="detail-image" src="img/otterl.jpg" alt=""> 
<span class="detail-image-title">Stayin' Alive</span> 
</div> 


</body> 
</html> 
添加 了 一 个 类 名 为 detail-image-container 的 <div>。<div> 是 常用 的 内 容 容 器 ， 通 常用 
于 为 一 段 内 容 添 加 样式 。 
在 <div> 中 添加 了 用 于 展示 大 图 的 <img>, 以 及 一 个 包 庄 着 大 图 标题 的 <span>。 分 别 为 <img> 
和 <span> 添 加 类 名 detail-image 和 detail-image-title。 
保存 index.html， 切 换 到 styles.css， 并 在 最 后 添加 样式 ， 限 制 .detail-image 类 的 宽度 。 





.thumbnail-title { 
} 


.detail-image { 
width: 90%; 
} 


保存 styles.css， 启 动 browser-sync， 在 Chrome 中 打开 项 目 (如 图 4-3 所 示 )。( 命令 是 browser-sync 
start --server --browser "Google Chrome" --files "stylesheets/*.css, *.html",) 





©@ (otroram x 


所 GD localhost:3000 To 
民间 | Hements Console Sources Network Timeline Profiles Resources » 





x Ml re 










v<header> 
<h1 class="main-header">ottergram</hi> 
</header> 
p<Ul class: ></ Ul> 
je-container 5 
< lage” src="img/otterl. ipg” alt> 
<span class="detail-image-title">Stayin' Alive</span> 
</div> 
<div></div> 











</body> 
</html> 


Barbara 
gisele 


Styles | Event Listeners DOM Breakpoints Properties 
Fiter :hov 的 cls 十 ， 
element. style { 





div { user agent stylesheet 
display: block; 


Inherited from body 





body { styles.css?rel=.57904162849:27 

font-size: 62,5%; 

background:> 国 rgb(149，194,，215); 
Inherited from | html Fitter Show all 
htmt { normalize.min. css:1 

font-family: sans-serif; pdisplay block 

* font-family sans-serif 
A -webkit-text-size~adjust; 100%} Pfont-size 10px 
各 height 332px 
width 530px 


图 4-3 ”大 图 初始 样式 
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.detail-image 出 现在 页 面 底部 , 比 缩 略 图 略 窜 一 些 。 大 图 宽度 被 设置 为 其 容器 宽度 的 90%， 
右 侧 还 有 一 些 空余 ,。 浏览 器 将 .detail-image-title 中 的 文本 放 到 了 空余 部 分 中 。( 稍 后 会 为 文 
本 添加 样式 。) 

试 着 改变 浏览 器 窗口 大 小 ,你 会 发 现 一 个 问题 : 当 调 整 缩 略 图 的 宽度 时 ,大 图 可 能 会 被 挤 出 
视图 。 这 个 问题 稍 后 再 解决 。 


4.1.2 缩 略图 水 平 布 局 


接着 来 更 新 .thumbnail-1list 和 .thumbnail-item 类 的 样式 ,使 图 片 水 平 深 动 。 

将 idex.html 中 的 5 个 <Li> 复 制 一 过 ， 生 成 足够 多 的 内 容 以 测试 滚动 功能 。 选 中 <u1 
class="thumbnail-1list"> 和 </ul> 两 行 之 间 的 内 容 , 复制 并 粘贴 到 </uL> 之 前 。 最 终 一 共有 10 
项 ， 为 otter1.jpg 到 otter5.jpg 这 5 张 图 各 重复 一 次 。 

记得 保存 index.html。 在 开发 过 程 中 复制 内 容 是 一 个 不 错 的 办 法 ， 可 用 于 模拟 更 加 健壮 的 项 
目 ， 还 能 预览 代码 如 何 处 理 真 实 场景 。 

为 使 缩 略 图 水 平 轮 动 ， 必 须 限定 缩 略 图 列表 中 每 一 项 的 宽度 ， 并 使 其 水 平 排 成 一 行 。 

此 前 多 次 使 用 过 的 display: btLock 这 次 无 法 派 上 用 场 了 ， 因 为 它 会 在 元 素 前 后 产生 换行 效 
果 。 不 过 男 一 个 相关 的 属性 display: inLine-btLock 倒 正好 适用 。 使 用 dispLay: inline-block 
时 ， 元 素 盒 子 会 如 dispLay: block 一 般 展现 ,但 不 会 产生 换行 一 一 这 样 一 来 ， 缩 略图 就 可 以 排 
成 一 行 。 

在 styles.css 中 修改 .thumbnaiL-item 类 的 dispLay 声 明 ， 并 添加 width 声明 : 
























































.thumbnail-item { 


display: bteck; 
display: inline-block; 
width: 120px; 
border: lpx solid rgb(100%, 100%, 100%, 0.8); 
border: lpx solid rgba(100%, 100%, 100%, 0.8); 
} 


( 注意 ，Atom 中 的 linter 可 能 会 警告 “同时 使 用 width 和 border 可 能 导致 元 素 大 小 超出 预期 ”。 
这 是 因为 width 只 针对 元 素 盒子 的 内 容 部 分 ， 而 不 是 内 边 距 或 边框 部 分 。 无 须 理会 这 个 警告 。 

如 果 将 .thumbnail-item 元 素 的 宽度 设置 为 120px，.thumbnail-image 同 样 也 会 固定 下 来 ， 
因为 .thumbnail-image 自 适应 为 其 容 硕 的 宽度 。 

那么 为 何不 为 .thumbnail-image 设 置 width: 120px 呢 ?我 们 需要 让 .thumbnail-image 
和 .thumbnail-title 宽 度 一 致 ， 但 没有 分 别 为 两 者 设置 宽度 ， 而 是 为 它们 共同 的 父 元 素 设 置 宽 
度 。 如 此 一 来 ， 铬 要 改变 width， 只 需 修改 一 处 。 一 般 来 说 ， 让 内 部 元 素 根 据 容器 自 适应 是 一 种 
不 错 的 实践 。 

保存 styles.css, 在 Chrome 中 查看 页 面 。 可 以 看 到 .thumbnail-item 元 素 依 次 排 成 一 排 
过 在 容器 宽度 被 填 满 后 产生 了 换行 ( 如 图 4-4 所 示 )。 
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© MN otteroram x VE 加 
CGC 0 localhost:3000 文 | 

[R 0], Eements Console Sources Network » i 
<html> 
Pb <head>..</head> 
了 <body> 


WE 


图 4-4 
为 得 到 预期 的 滚动 效果 ， 


.thumbnail-list { 
list-style: none; 
padding: 0; 


white-space: nowrap; 
overflow-x: auto; 


| a ; 
html body ul.thumbnail-list 者 lll 


p<script id="__bs_script_ ">..</script> 
<script async src="/browser-sync/browser-sync— 
client,.2,12,.5,.is"></script> 

b <header>..</header> 


Y<UL class="thumbnail-list"> 
<Li CcLass= thumbnaitL-item A 
p<li class="thumbnail-item">..</li> 
Pp<li class="thumbnail-item">..</li> 
p<li class="thumbnail-item">..</li> 
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Filter :hov 作 .cls 
element.style 并 

:thumbnail—item { 


display: inline-block; 
width: 120px; 
让 


styles.css:34 


口 
border:P 1px solid 
[Drgba(100%, 100%, 100%, 0.8); 





他 开 得 4 user agent stylesheet 


国 Show all 


Filter 
text-align: -webkit-match-parent; 





Pp border-.. Drgba 


inline-block 产 生 换 行 


需要 在 .thumbnail-1list 中 设置 禁止 换行 并 允许 滚动 。 


white-space: nowrap 声 明 禁 止 .thumbnail-item 元 素 换 行 。overflow-x: auto 则 告诉 浏 
览 器 , 在 .thumbnaitL-List 元 素 的 水 平方 向 (X 轴 ) 上 添加 滚动 条 ， 以 容纳 超出 的 部 分 。 若 没有 
此 声明 ， 则 需要 滚动 整个 页 面 方 能 看 到 超出 部 分 。 

再 次 保存 文件 , 在 浏览 器 中 看 下 效果 。 这 下 缩 略 图 都 在 一 排 了 , 还 能 水 平 滚动 ( 如 图 4-5 所 示 )。 


对 于 改进 Ottergram 界 面 来 说 , 这 已 经 是 一 个 不 错 的 开始 








但 还 算 不 上 完美 , 因为 页 面 还 不 











能 很 好 地 适应 很 多 其 他 尺寸 的 屏幕 ， 尤 其 是 较 当前 所 用 屏幕 而 言 大 很 多 或 小 很 多 的 屏幕 。 
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©0@ /NM otorm x 全 [二 | 
> CC ( localhost:3000 六 | 三 
x 


> 
0 797 x 682 ; | 民 | Elements Console Sources Network 为 @1| : 
<html> 
<head>-</head> 
<body> 
OTTER 区 全 仙 p<script type=" “text/javascript” id="_bs_script_">.</script> 
<script async src="/browser- Sync- 
client.2.10.0.j cript> 
<header cl leader">..</header> 
VU Cl = 


p<li class=" 
p<li class=" 
p<li class=" 
p<li class=" 
html body 

















~item">.</li> 
li.thumbnail-item 
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Filter + ,cls 草 坊 


element. style { 
} 


Styles,css?rel=..52543894993;30 
:thumbnail-list { 
padding: 0 
white-space: nowrap; 
overf low-x: auto; 





ul, menu, dir { user agent stylesheet 


display: 
list-style-ty 
-webkit-margin-before: lem; a 加 Show all 
-webkit-margin-after: lem a ssh 
Rn rs SP ey 

~webkit—mart 9px 
et ano start 40px; on pe 


sans-serif 


Inherited from body 上 
body { styles.css?rel=.52543894993:12| ”heinht+ 


图 4-5 可 以 水 平 滚动 的 缩 略 图 
接 下 来 的 两 节 会 添加 一 些 代 码 , 为 Ottergram 添 加 更 加 流体 化 的 布局 , 并 允许 UI 在 不 同 布局 间 
切换 ， 以 适应 不 同 尺寸 的 屏幕 。 








4.2 flexbox 


前 面 已 经 见 过 将 dispLay 样 式 指 定 为 bLock 和 :intLine 的 情况 。 像 刚刚 完成 的 滚动 列表 中 的 缩 
略图 项 这 样 的 行内 元 素 ( inline element ) 会 逐一 相 邻 排 列 ， 而 块 级 元 素 (block element ) 则 占据 


整个 水 平方 向 。 
还 有 另外 一 种 思考 方式 , 即 块 级 元 素 从 上 向 下 流动 , 而 行内 元 素 从 左 向 右 流动 ( 如 图 4-6 所 示 )。 


















































































































































| 回国 国 国 加 加 图 - 行内 元 素 水 平 排列 
| 
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一 一 一 人 | 国 国 回国 回国 回国 回国 
回国 回国 回国 国 行内 元 素 换行 























图 4-6” 块 级 元 素 与 行内 元 素 
dispLay 属 性 告诉 浏览 器 元 素 在 页 面 布局 中 如 何 排列 。 对 博客 或 在 线 百 科 这 类 网 站 来 说 ， 


ee 社交 媒体 等 应 用 型 布局 的 站 点 ， 可 以 
态 也 就 是 弹性 盒 布局 ， 又 称 为 flexbox。 


flexbox Cs 以 确保 缩 略 图 和 大 图 区 域 填 满 整个 屏幕 , 并 保持 彼此 间 的 相对 比例 一 一 这 
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正 是 Ottergram 所 需要 的 。 此 外 ，flexbox 属 性 还 能 够 将 大 图 区 域 的 内 容 水 平 、 垂 直 居 中 , 但 如 果 使 
用 标准 盒 模型 则 很 难 实现 。 


4.2.1 创建 flex 容 器 


在 添加 第 一 个 fexbox 属 性 前 ， 先 将 <htmL> 和 <body> 的 高 度 设 置 为 100%。<htmL> 元 素 是 
DOM 树 的 根 元 素 ，<body> 是 其 子 元 素 。 将 这 两 者 的 高 度 设置 为 100%， 人 允许 内 容 填 满 浏览 器 或 
设备 窗口 。 

@font-face { 


} 


html, body { 
height: 100%; 

} 

body { 


font-size: 10px; 
background: rgb(149, 194, 215); 


注意 上 面 代码 中 由 逗号 分 隔 的 两 个 选择 器 。 任意 类 型 的 选择 器 都 可 以 如 此 组 合 , 以 设置 一 些 
共同 样式 。 

此 外 还 可 注意 到 ，body 选 择 器 现在 已 经 有 两 条 样式 规则 。 当 浏览 器 看 到 附加 的 样式 声明 时 ， 
会 将 其 添加 到 该 选择 器 现 有 的 样式 信息 中 。 如 本 例 的 浏览 器 首先 看 到 <body> 的 height 应 该 为 
100%， 并 将 信息 存储 下 来 。 然 后 继续 读 下 一 条 规则 ,将 background 和 font-size 信 息 和 height 
存在 一 起 。 

现在 可 以 开始 创建 第 一 个 flex 容 器 了 。flex 容 器 能 够 控制 其 子 元 素 ( flex 项 目 ) 的 布 局。 在 flex 
容器 中 ，flex 项 目的 大 小 和 位 置 沿 着 主轴 和 侧 轴 出 现 ( 如 图 4-7 所 示 )。 


主轴 - 


























flex 项 目 flex 容 器 


图 4-7 ”flex 容 器 的 主轴 和 侧 轴 
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为 <body> 添 加 display: flex 声 明 ， 将 其 转变 为 flex 容 器 。 
body { 
display: flex; 


font-size: 10px; 


background: rgb(149, 194, 215); 
} 


如 果 立 马 保存 代码 ， 浏览 器 中 的 样式 会 很 悲 催 ， 如 图 4-8 所 示 。 这 是 因为 主轴 从 左 向 右 将 所 
有 的 flex 项 目 ( <body> 的 所 有 子 元 素 ) 排 成 了 一 行 。 








@e9e@ [DD okergram x \ 读 [e| 
€ SC 0 localhost3000 三 





OTTERGRAM 








图 4-8 治 主轴 排列 的 flex 项 目 


不 过 我 们 也 看 到 flex 项 目 为 适应 空间 有 所 收缩 ， 而 不 是 换行 ， 这 倒是 一 个 好 消息 。 第 二 个 好 
消息 是 只 需要 一 行 样式 就 能 解决 布局 问题 ( 差不多 就 一 行 )。 


4.2.2 ”改变 flex-direction 


为 <body> 元 素 设置 fTLex- direction 便 可 以 解决 布局 问题 : 
body { 
dispLay: flex; 


fLex-direction: column; 


font-size: 10px; 


background: rgb(149, 194, 215); 
} 


这 样 就 对 调 了 flex 容 器 的 主轴 和 侧 轴 ， 如 图 4-9 所 示 。 
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侧 轴 





flex 项 目 


些 王 


flex 容 器 














图 4-9 ”设置 flex-direction: column 之 后 的 主轴 和 侧 轴 


将 flex-direction 设 置 为 column 后 ，Ottergram 基 本 恢复 正常 。 但 是 当 浏 览 器 窗口 的 宽度 远 
大 于 高 度 时 ， 会 出 现 如 图 4-10 所 示 的 视觉 问题 。 














图 4-10 页面 变 宽 时 缩 略 图 几 近 消失 
只 要 新 增 一 个 包 庄 元 素 ， 添 加 一 些 新 的 flexbox 属 性 ， 就 能 补救 问题 。 


4.2.3” flex 项目 中 的 元 素 分 组 


<body> 元 素 有 三 个 flex 项 目 : <header>、.thumbnail-list 和 .detail-image-container 
容器 。 在 Ottergram 的 开发 ( 以 及 使 用 ) 过 程 中 无 论 发 生 什么 ，<header> 在 布局 和 复杂 度 方 面 基 
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本 不 会 有 太 多 变动 。 它 位 于 页 面 顶部 ， 展 示 文 本 ， 仅 此 而 已 。 

男 一 方面 ，.thumbnail-1list 和 .detail-image-container 及 其 内 容 在 布局 和 复杂 度 上 则 
很 可 能 发 生变 化 。 任 何 一 个 发 生变 化 ， 很 可 能 会 影响 到 另 一 个 。 

基于 前 述 原因 ， 我 们 将 .thumbnail-1list 和 .detail-image-container 分 到 一 个 组 ， 将 它们 
放 在 一 个 flex 容 器 中 。 使 用 类 名 为 main-content 的 <main> 标 签 将 它们 包 右 起 来 ( 如 图 4-11 所 示 )。 








| .thumbnail-list 





.detail-image-container 




















图 4-11 包 右 ,thumbnaiL-List 和 .detaiL-image-container 


在 index.html 中 做 以 下 更 改 : 为 <header> 添 加 main-header 类 名 ， 并 将 .thumbnaitL-List 
(<uUL> ) 和 ,detail-image-container (<div> ) 放 在 类 名 为 main-content 的 <main> 元 素 中 。 


<body> 
<header> 
<header class="main-header"> 
<hl class="l0ogo-text">ottergram</h1> 
</header> 
<main class="main-content"> 
<UL class="thumbnail-list"> 


</ul> 

<div class="detail-image-container"> 
<img class="detail-image" src="img/otterl.jpg" alt=""> 
<span class="detail-image-title">Stayin' Alive</span> 


</div> 
</main> 


现在 .main-header 和 .main-content 是 <body> 的 两 个 flex 项 目 了 。 

将 .thumbnail-list 和 ,detail-image-container 放 在 .main-content 中 之 后 , 便 可 以 随意 
指定 <header> 的 高 度 , <body> 在 垂直 方向 上 余下 的 空间 就 是 .main-content 所 占据 的 空间 。 这 样 
就 可 以 在 不 影响 头 部 的 情况 下 ， 为 ,thumbnaiL-List 和 .detaitL-image-container 分 配 空 间 。 

保存 index.html。body 中 只 剩 下 两 个 flex 项 目 ， 可 以 使 用 fLex 属 性 指定 它们 的 相对 尺寸 。 
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4.2.4 _ flex 缩写 属性 


flex 容 器 将 其 空间 分 配给 内 部 的 flex 项 目 。 若 没有 在 主轴 方向 上 给 flex 项 目 指定 尺寸 ， 默 认 情 
况 下 ,flex 容 器 会 根据 flex 项 目 数量 平均 分 配 空间 ,在 主轴 方向 上 的 每 个 项 目 获 得 相同 的 空间 比例 ， 
如 图 4-12 所 示 。 




















图 4-12 ”3 个 flex 项 目 平 均 分 配 空间 


假设 图 4-12 中 的 某 个 flex 项 目 较 其 他 项 目 来 说 略 显 贪 歼 ， 想 要 索取 两 份 空间 。 这 种 情况 下 ， 
flex 容 器 会 将 主轴 方向 的 空间 分 为 4 等 份 ， 那 个 贪 焚 的 flex 项 目 独占 其 中 2 份 ( 也 就 是 一 半 ), 余下 
两 个 项 目 各 得 1 份 (如 图 4-13 所 示 )。 

















图 4-13 ”3 个 flex 项 目 不 平均 分 配 空间 


Ottergram 中 的 ,main-content 是 这 个 贪 焚 的 元 素 ， 它 要 在 主轴 方向 上 尽 可 能 占有 更 多 空间 ; 
而 .main-header 则 尽量 少 占 空 
fLex 属 性 为 flex 项 目 指定 了 能 占用 的 空间 。 这 是 一 个 缩写 属性 ， 如 图 4-14 所 示 。 


flex: 0 1 auto; 





fLex-grow 
fLex-shrink 


flex-basis 


图 4-14 ” flex 缩写 属性 及 其 值 


强烈 建议 直接 使 用 flex 蔡 代 具 体 属 性 ,这 能 够 避免 因 无 意 间 遗漏 某 个 属性 而 造成 的 不 符合 预 
期 的 结果 。 

第 一 个 值 是 我 们 当下 要 关注 的 , 它 决定 了 flex 项 目的 拉 伸 程度 。 默认 情况 下 , flex 项 目 不 拉 伸 。 
对 .main-header 来 说 ， 默 认 行 为 恰好 合适 ， 但 是 ,main-content 则 需要 拉 伸 。 

在 styles.css 中 为 .main-header 添 加 样式 ， 指 定 fLex 为 默认 值 0 1 auto。 
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af 
text-decoration: none ; 


} 


.main-header { 
flex: 0 1 auto; 
} 


.logo-text { 
background: white; 








值 0 1 auto 可 解读 为 “无 须 进 行 拉 伸 ， 如 有 必要 将 会 收缩 ， 自 动 计算 大 小 ”。 最 终结 果 就 
是 .main-header 只 会 占据 它 所 需 的 空间 ， 一 点 不 多 。 
接着 为 .main-content 添 加 样式 声明 ,将 其 flex 属 性 设置 为 1 1 auto。 








.logo-text { 
} 


.main-content { 
flex: 1 1 auto; 
} 


.thumbnail-item + .thumbnail-item { 





.main-content 的 flex 声 明 中 的 第 一 个 值 对 应 flex-grow 属 性 ， 值 为 1 意味 着 会 尽 可 能 拉 
仲 。 .main-content 唯 一 的 兄弟 元 素 ,main-header 已 在 前 面 声 明 不 会 进行 拉 伸 ， 所 
以 .main-content 会 拉 伸 并 占据 剩余 的 全 部 空间 。 

.main-header 和 .main-content 两 个 元 素 作为 <body> 的 flex 项 目 ， 根 据 各 自 的 需要 占据 
<body> 的 弹性 空间 。 接 下 来 对 ,main-content 元 素 的 布局 进行 调整 。 















































4.2.5 _ flex 项 目的 排序 与 对 齐 方式 
flexbox 技 术 人 允许 将 flex 项 目 进 一 步 细 分 为 flex 容 姨 , 这 允许 我 们 专注 于 某 一 层 的 布局 。 下面 很 


快 会 将 .main-content 变 成 flex 容 需 。 
使 用 艇 套 的 flex 容 器 时 ， 从 最 小 、 最 内 部 的 元 素 开 始 逐 渐 向 上 创建 样式 的 方法 已 不 再 适用 ， 
而 从 最 外 层 元 素 开 始 一 路 向 下 会 更 有 用 。 
接 下 来 会 将 .main-content 转 换 为 主轴 为 垂直 方向 的 flex 容 器 ， 并 为 其 flex 项 目 指定 flex 属 
性 ,使 ,thumbnaitL-List 占 据 默认 大 小 的 空间 ，.detaiL-image-container 根 据 剩余 空间 进行 
拉 伸 。 最 后 ， 将 .thumbnaiL-List 移 动 到 ,detaiL-image-container 下 面 (如 图 4-15 所 示 )。 
在 styles.css 中 为 .main-content 添 加 display: flex 和 flex-direction: coLumn 两 条 规 
则 ,为 .thumbnail-1list 添 加 flex 属 性 ， 并 为 .detail-image-container 添 加 新 的 样式 声明 。 
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对 两 个 flex 项 目 进行 限制 





<header> 








.main-content | i 








拉 伸 以 填 满 余下 空间 


display: flex; 
flex-direction: column; 


.detail-image-container 月 | flex: 1 1 auto; 








仅 占据 默认 高 度 的 空间 








-thumbnail-list 月 | 一 flex: 0 1 auto; 




















图 4-15 将 ,main-content 转 换 为 ex 容器 


.main-content { 
flex: 1 1 auto; 
display: flex; 
flex-direction: column; 


} 


.thumbnail-list { 
flex: 0 1 auto; 
list-style: none; 
padding: 0; 


white-space: nowrap; 
overflow-x: auto; 


.thumbnail-title { 


} 


.detail-image-container { 
flex: 1 1 auto; 
} 


.detail-image { 


有 人 可 能 会 好 奇 ， 为 什么 不 像 对 .detail-image 一 样 为 .thumbnail-list 和 .detail- 
image-container 设 置 百分比 高 度 ， 比 如 将 ,thumbnail-1list 的 高 度 设置 为 25%, 将 .detail- 
image-wrapper 的 高 度 设置 为 73%。 从 表面 上 看 ， 这 样 做 是 符合 逻辑 的 ,但 最 终结 果 并 不 会 如 你 
所 愿 ,在 .detail-image 宽 度 的 作用 下 , .detail-image-container 可 能 
list 在 不 同 尺寸 的 窗口 中 也 可 能 偏 大 或 偏 小 。 

















扁 大 , 而 . thumbnail- 
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简 而 言 之 , 使 用 flex 属 性 设置 flex 项 目 尺 寸 , 并 设置 比较 重要 的 某 一 固定 尺寸 (如 .detail- 
image 的 宽度 ) 才 是 正确 的 方式 。 

接 下 来 看 看 如 何 将 缩 略图 列表 放 到 大 图 下 面 。 默 认 情 况 下 ，flex 项 目 按照 它们 在 HTML 中 的 

序 依次 绘制 。 这 被 称 为 源 顺 序 ( source order )， 是 开发 者 控制 元 素 绘制 顺序 的 主要 手段 。 

一 种 改变 源 顺 序 的 方法 是 剪 切 大 图 的 那 段 代码 并 将 其 粘贴 到 .thumbnaiL-List 前 面 ,但 其 实 

一 个 新 的 flexbox 属 性 也 能 解决 问题 。 

在 styles.css 中 ， 为 .thumbnail-1list 添 加 如 下 一 条 order 样 式 声 明 : 


.thumbnail-list { 
flex: 0 1 auto; 
order: 2; 
list-style: none; 
padding: 0; 





white-space: nowrap; 
overflow-x: auto; 





order 属 性 值 可 以 是 任意 整数 。 默 认 值 为 0, 意味 着 使 用 源 顺 序 ; 包括 负数 在 内 的 其 他 值 则 告诉 
1 览 器 将 该 flex 项 目 置 于 其 他 项 目 之 前 或 之 后 。 为 ,thumbnail-1ist 设 置 的 order: 2 告诉 浏览 器 将 
绘制 在 其 他 order 值 更 小 的 元 素 后 面 一 一 如 .detail-image-container， 其 order 值 为 默认 值 0。 

保存 styles.css， 查 看 浏览 器 。 可 以 看 到 ， 缩 略图 现在 已 经 在 页 面 底部 了 (如 图 4-16 所 示 )。 
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民 和 中 Elements Console Sources Network Timeline 为 


| 





oTTERGRAM 


<html> 
* <head>-</head> 
MD 


<script type="text/javascript" id="_bs_script_ ">.</script> 
en 
</script> 
-header"> “</header> 


class="thumbnail-item" 
P<li class="thumbnail-item" 
P<li class="thumbnail-item">.</li> 


html body main.main-content TT 


Styles Event Listeners DOM Breakpoints Properties 








Filter :hov 载 .cls .> 
element. style { 
} 


,thumbnait-tist { styles, css:58 
flex:p0 1 auto; 

order: 2; 

padding: b 0; 

white-space: nowrap; 

overflow-x: auto; 

} 

ul, menu, dir { user agent stylesheet 
display: block; 

list-style-type: disc; Fitter 
~webkit-margin-before: lem; ol 
-webkit-margin-after: lem; ee 
~webkit-margin-start: QOpx; 


-webkit-margin-end: Opx; De 
-webkit-padding-start; 40px; fiexrgrov 
Inherited from body focshrink 
body { styles,css:27 font-family 

display: flex 


图 4-16 改变 元 素 的 绘制 顺序 


国 Show all 
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在 后 面 继续 对 Ottergram 进 行 UI 布 局 的 过 程 中 还 会 用 到 dispLay: fLex。 到 目前 为 止 ， 我 们 
只 尝试 过 仅 有 数 个 元 素 的 flex 容 器 。 试 着 将 .thumbnaiL-List 变 成 flex 容 器 , 体验 更 多 关于 flexbox 
的 内 容 。 


.thumbnail-list { 
flex: 0 1 auto; 
order: 2; 
display: flex; 
list-style: none; 
padding: 0; 


white-space: nowrap; 
overflow-x: auto; 


} 


保存 文件 ， 如 果 看 到 如 图 4-17 所 示 的 奇怪 效果 ， 先 不 要 慌 。 


Dn Os Do pA 
-| 并 EE -a 种 
本 A 5 
Ze ee 
ET Barbara a 


Robin 
图 4-17 ”排列 不 齐 的 缩 略 图 
为 修复 问题 ， 将 .thumbnaitL-item 的 width 声明 替换 为 min-width 和 max-width 两 个 声明 ， 
这 样 便 可 以 修复 因 图 片 尺 寸 不 一 导致 的 布局 问题 。 
还 可 以 删除 为 .thumbnail-item + ,thumbnaitL-item 元 素 设置 的 margin-top 声 明 ， 现 在 
的 布局 完全 不 需要 它 。 









Maurice 














pumbnaili humbnaitL-i f 
} 


.thumbnail-item { 
display: inline-block; 


width: 120px; 

min-width: 120px; 

max-width: 120px; 

border: lpx solid rgb(100%, 100%, 100%); 

border: lpx solid rgba(100%, 100%, 100%, 0.8); 
} 


接 下 来 看 看 如 何 处 理 .thumbnail-1list 内 部 的 flex 项 目 之 间 的 间隙 问题。 在 styles.css 中 ， 
为 .thumbnaiL-List 类 添加 一 个 justify-content 声 明 。 


.thumbnail-list { 
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flex: 0 1 auto; 

order: 2; 

display: flex; 

justify-content: space-between; 
list-style: none; 

padding: 0; 


white-space: nowrap; 
overflow-x: auto; 


justify-content 属 性 决定 flex 容 器 如 何 控制 flex 项 目 在 主轴 方向 上 的 绘制 方式 。 使 用 
space-between 值 ， 保 证 每 个 flex 项 目 之 间 的 空隙 是 相等 的 。 
justify-content 属 性 可 以 取 5 种 不 同 的 值 ， 图 4-18 展 示 了 不 同 取 值 的 效果 。 


主轴 








flex-start 


flex-end 


center 


space-between 


space-around 








图 4-18 justify-content 效 果 示 意图 


.thumbnail-1list 布 局 已 经 完成 ， 下 面 来 处 理 . detail-image-container 及 其 内 容 。 


4.2.6 ”居中 显示 大 图 


大 图 是 Ottergram 页 面 的 焦点 , 应 当 处 于 最 突出 的 位 置 , 方便 用 户 好 好 欣赏 可 爱 的 水 猎 。 另 外 ， 
它 还 需要 一 个 漂亮 的 标题 。 

要 让 大 图 居中 ， 首 先 需 要 将 图 片 和 标题 放 入 一 个 容器 ， 进 而 将 .detail-image-container 
中 的 包装 元 素 居 中 ， 如 图 4-19 所 示 。 

在 .detail-image-container 中 让 .detail-image 居 中 虽然 简单 ， 但 想 要 给 .detail- 
image-title 设 置 正确 的 偏 移 量 就 比较 麻烦 , 因为 .detail-image 和 .detail-image-container 
会 动态 改变 。 
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.detail-image-container 


.detail-image 


.detail-image-title 





图 4-19 将 .detail-image 和 .detail-image-title 置 人 “相框 ” 


这 时 ， 一 个 中 间 的 包装 元 素 就 很 有 用 了 一 一 它 会 限制 .detail-image 的 尺寸 ， 并 作为 
,detail-image-title 的 定位 参照 。 
在 index.html 中 添加 一 个 类 名 为 detail-image-frame 的 <div> 标 签 。 


</ul> 


<div class="detail-image-container"> 
<div class="detail-image-frame"> 
<img class="detail-image" src="img/otterl.jpg" alt=""> 
<span class="detail-image-title">Stayin' Alive</span> 
</div> 
</div> 
</main> 
</body> 
</html> 


保存 index.html， 然 后 在 styles.css 中 为 .detail-image-frame 类 添加 一 句 简 单 的 样式 声明 
text-align: center。 这 是 一 种 无 须 flexbox 即 可 实现 居中 的 方式 一 一 但 注意 ， 只 能 是 水 平 居 中 。 


.detail-image-container { 
flex: 1 1 auto; 
} 


.detail-image-frame { 
text-align: center; 
} 
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.detail-image { 
width: 90%; 
} 


紧 接 着 要 让 .detail-image-frame 在 .detail-image-container 内 部 居中 。 更 新 样式 文 
件 , 将 .detail-image-container 设 置 为 flex 容 器 ， 使 用 justify-content: center 使 其 flex 
项 目 沿 主轴 方向 (在 本 例 中 ， 也 就 是 默认 的 水 平方 向 ) 居中 ， 添 加 一 个 新 的 flexbox 属 性 声明 
align-items: center， 使 flex 项 目 在 侧 轴 方向 (垂直 方向 ) 上 居中 。 





.detail-image-container { 
flex: 1 1 auto; 
display: flex; 
justify-content: center; 
align-items: center; 


} 


保存 文件 , 再 看 下 效果 , 水 猎 已 经 稳 稳 当当 地 躺 在 .detaiL-image-container 正 中 央 了 (如 
图 4-20 所 示 )。 


© / [own 











€ 2 C 0 localhost3000/# 安 医 
民 晤 | Elements » X 






<html> 
Pp <head>..</head> 
-| 





html body main WEE 


Styles Event Listeners DOM Breakpoints 为 





:hov 犁 -ctd 
elenent. style 
党 
} 
styles.css:94 
detait— 
image— 
container { 
flex:p1 1 








日 Showal 
atign- atign-items 
i center 
center; | ,display 
flex 
User agent St. 人 
div » flex-grow 





beekt | flex-shrink 





图 4-20” .detaitL-image-frame 在 ,detaiL-image-container 里 居中 显示 


4.3 绝对 定位 与 相对 定位 
有 时 候 可 能 需要 将 元 素 放 在 另 一 元 素 中 的 精确 位 置 上 , 这 可 以 使 用 CSS 提 供 的 绝对 定位 实现 。 
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使 用 绝对 定位 将 .detail-image-title 放 在 .detail-image-frame 的 左下 角 ， 如 图 4-21 所 示 。 


.detail-image-container 


.detail-image 


.detail-image-title 








图 4-21 ”绝对 定位 .detail-image-title 
绝对 定位 元 素 必须 满足 以 下 3 个 条 件 。 
口 position 属 性 值 为 absolute， 告 知 浏览 器 该 元 素 将 脱离 常规 文档 流 (normal flow ), 不 
与 其 兄弟 元 素 一 起 布局 。 
口 使 用 top 、right 、bottom 或 Left 中 的 一 个 或 多 个 属性 设置 坐标 ， 坐 标 值 可 以 是 绝对 长 度 
( 如 像素 值 ) 或 相对 长 度 (如 百分比 值 )。 
口 有 一 个 position 属 性 显示 声明 为 reLative 或 absoLute 的 祖先 元 素 。 这 点 很 重要 ， 若 不 
满足 本 条 件 ， 该 绝对 定位 元 素 将 会 相对 于 <html> 元 素 ( 浏览 器 窗口 ) 定位 。 

一 条 忠告 : 虽然 所 有 元 素 都 用 绝对 定位 看 似 还 挺 不 错 的 , 但 必须 少 这 么 用 。 因 为 一 个 全 部 由 
绝对 定位 组 成 的 页 面 基本 无 法 维护 ， 而 且 在 其 他 屏幕 上 的 效果 可 能 会 很 糟糕 。 

必定 定 位 坐标 实际 上 是 在 指定 元 素 边缘 与 容器 边缘 之 间 的 距离 ， 如 图 4-22 所 示 。 

图 4-22 展 示 了 两 个 绝对 定位 的 例子 : 第 一 个 例子 中 的 元 素 定 位 为 上 边缘 距 容 器 顶部 5S0px, 左 
边缘 距 容器 左边 缘 200px; 第 二 个 例子 有 所 不 同 ， 根 据 下 边缘 和 左边 缘 定位 。 

在 定位 .detail-image-title 之 前 , 需要 先 将 .detaiL-image-frame 的 position 属 性 设置 
为 relative， 然 后 相对 .detail-image-frame 定 位 ,detail-image-title。 








.detail-image-frame { 
position: relative; 
text-align: center; 


} 


为 .detail-image-frame 设 置 position: relative 是 因为 既 需 要 将 它 保留 在 常规 文档 流 
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中 ， 又 需要 它 作为 绝对 定位 元 素 的 容器， 因此 其 position 属 性 必须 显 式 定义 。 


element position: 200px, 50px 








{ 
position:absolute; 
top: SOpx; 
left:200px; 























position:absolute; 
bottom: 5Opx; 
left:200px; 

















element position: 200px, 50px 


图 4-22 元素 基于 边缘 绝对 定位 


在 styles.css 的 底部 为 .detail-image-title 添 加 声明 , 目前 将 颜色 设 为 白色 并 将 字体 设置 为 
默认 大 小 的 四 倍 即 可 。 


.detail-image { 
width: 90%; 

} 

.detail-image-title { 
color: white; 


font-size: 40px; 
} 


目前 一 切 都 很 好 ( 如 图 4-23 所 示 )， 但 还 是 太 普通 了 。 
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€ SC 口 localhost3000 空 


x | lle 





OTTERGRAM 





<html> 
bp <head>..</head> 
v<body> 
p<script type="text/javascript" id="_ bs_script_">..</script> 
<script async src="/browser-sync/browser-sync-client.2.11.1.is"></script> 
P<header cLass="main-header">..</header> 
Y<main class="main-content"> 
P<ul cLass='"thumbnait-List">.</uUL> 
Y<div class="detail-image-container"> 
<div class="detail-image-frame”> 
tail-image" src="img/otterl.ipg" att> 
detail-image-title -Stayin' Alive- /span 





<div style="display: block;"></div> 
</body> 
</html> 


html body main div.detail-image-container div.detalHimage-frame rr 
Styles Event Listeners DOM Breakpoints Properties 
Fikter :hov 办 .cls 十 ， 
人 


‘detail- styles,css?rel=.8135346541:111 
image-title { 

color: Dwhite; 

font-size: 40px; 


Inherited from div. detail-image-frame 
‘detail— Styles.css?rel=.8135346541: 102 
image-frame { 

position: relative; 

text-align: center; Filter ] Show all 











。 | cotor rgb(2. 
Inherited from bodv Cy 


图 4-23 ” .detail-image-title 的 基本 样式 
为 深入 接触 CSS, 我 们 来 试 着 为 .detail-image-title 添 加 一 些 文本 特效 。 记 住 , 定位 带 有 
样式 的 文本 时 ， 元 素 盒子 可 能 会 因为 自 定义 字体 或 其 他 特效 的 视觉 因素 而 改变 。 本 例会 在 定 
位 .detail-image-title 之 前 先 设置 其 文字 样式 。 在 styles.css 中 为 .detail-image-title 添 加 
text-shadow 属 性 。 

















.detail-image-title { 
color: white; 
text-shadow: rgba(0, 0, 0, 0.9) lpx 2px 9px; 
font-size: 40px; 

} 


顾名思义 ，text-shadow 属 性 就 是 为 文本 添加 阴影 。 它 接受 一 个 颜色 值 作为 阴影 颜色 , 一 对 
偏 移 量 (决定 阴影 的 上 下 左右 位 置 )， 以 及 一 个 模糊 半径 值 (该 值 是 可 选 的 ， 值 越 大 则 阴影 越 大 ， 
颜色 越 渤 )。 

我 们 将 阴影 颜色 值 设 为 rgba(06，09，09，09.9)， 这 将 呈现 略微 有 些 透 明 的 黑色 。 阴 影 向 右 偏 
移 lpx， 向 下 偏 移 2px ( 负 值 会 使 阴影 向 左 或 上 偏 移 )。 最 后 的 9px 是 模糊 半径 。 图 4-24 展 示 了 阴影 
效果 。 
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ee ce cr Wr i poi» | x 
OTT 9 m <html> 


bp <head>..</head> 
<body> 
*<script type="text/javascript" id="_bs_script_ ">..</script> 
<script async src="/browser-sync/browser-sync-client.2,11.1.1s"></script> 
main-header">-</header> 
iain-~content"> 
humbnait-tist">-</ut> 
image-container'> 
Y<div class="detail-inage-frame"> 
<img class="detail-image" src="img/otterl.jpg" att> 
Span Stayin' Alive /span 
</div> 
</div> 
</main> 
<div style="display: block;"></div> 
</body> 
</html> 























html body main div.detai-image-container div.detai-image-frame BT 


Styles Event Listeners DOM Breakpoints Properties 
Fiter :hov 和 .cls 十 ， 





element. style { 


-detail— Styles.css?rel=.8135547829:111 
image-titte { 
color: Dwhite; 
text-shadow: 国 rgba(0, 0, 90, 0.9) 1px 
2px gpx; 
font-size: 40px; 





Inherited from div. detail-image-frame 
,detait- styles.css?rel=.8135547829:102 
> inage-frane { Fiter 国 Show all 


position: relative; 
text-align: center; pcolor 口 rgb(2 











图 4-24 .detail-image-title 的 文字 阴影 效果 


可 以 在 开发 者 工具 的 Elements 面 板 中 调整 text-shadow 值 ， 感 受 一 下 text -shadow 的 工作 方 
式 ( 如 图 4-25 所 示 )。 


[DD ortergram x VE 
€ SC [localhost3000 

















[3 侣 Elements Console Sources Network Timeline Profiles » 


<html> 
bP <head>..</head> 
v <body> 
P<script type="text/javascript” id="_ bs_script_ ">..</script> 
<script async src="/browser-sync/browser-sync-client.2,11,1,.js"></script> 
*<header class="main-header">..</header> 
iain-content"> 
humbnail-list">..</ul> 
detail-image-container"> 
detail-image-frame"> 

















vw<div class=: 
Y<div class: 





<img class="detail-image" src="img/otterl.ipg" alt> 
<span class="detail-image-title">Stayin' Alive</span> 一 $0 
</div> 
</div> 
</main> 
<div style="display: block;"></div> 
</body> 


</html> 


html body main div.detallimage-container div.detaiimage-fame Er 
Styles Event Listeners DOM Breakpoints Properties 
Filter :hov 和 .cls 十 ， 


element. style { 
} 


.detait- 。 Stytes,css?ret=.8135547829:111 
image-titte { 
color: Dwhite; 
text-shadow: 图 rgba(9，9，6，6.9) 28px 
22px 6px; 
font-size: 40px; 





ihenearem iv .retainage-frane 





.detail- ?relt= 7 

image-frame { Fiter 目 Show all 
position: relative; 

口 rgb(2- 





text-align: center; pcolor 


图 4-25 ”人 奔 张 的 文字 阴影 效果 
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最 后 再 锦上添花 ， 添 加 一 种 自 定义 字体 。 正 如 第 3 章 所 做 的 那样 ， 在 styles.css 中 添加 @font- 
face 声 明 ， 并 将 Airstream 字 体 添加 至 项 目 中 。 然后 为 . detail-image-title 设 置 font-family: 
airstreamreguLar。 


Gfont-face { 
font-family: 'airstreamregular'; 
src: url('fonts/Airstream-webfont.eot'); 
src: url('fonts/Airstream-webfont.eot?#iefix') format('embedded-opentype'), 
url('fonts/Airstream-webfont.woff') format('woff'), 
url('fonts/Airstream-webfont.ttf') format('truetype'), 
url('fonts/Airstream-webfont.svg#airstreamregular') format('svg'); 
font-weight: normal; 
font-style: normal; 
} 


@font-face { 
font-family: 'lakeshore'; 


.detail-image-title { 
font-family: airstreamregular; 
color: white; 
text-shadow: rgba(0, 0, 0, 0.9) lpx 2px 9px; 
font-size: 40px; 
} 


到 目前 为 止 ， 效果 已 经 非常 栈 了 ( 如 图 4-26 所 示 )。 


© / [ow x 








€ SC D localhost:3000 








民 器 Elements Console Sources Network Timeline Profiles » 


<html> 
Pp <head>..</head> 
<body> 
*<script type="text/javascript” id="_ bs_script_ “></script> 
<script async src="/browser-sync/browser-sync-client.2,11.1.1s"></script> 


> <header class="main-head: 





St 
-div ctassn"dctait image container"> 
Y<div class="detail-image-frame"> 
<img class="detail-image" src="img/otterl.jpg" att> 
<span class="detail-imaye-title">Stayin’ ALives/span> = $0 
</div> 
</div> 
</main> 
<div style="display: block;"></div> 
</body> 
</htmt> 


html body main div.detai-image-container div.detailimage-frame BE 


Styles Event Listeners DOM Breakpoints Properties 





Fitter :hov 坦 .cls 十 ， 
elenent. style { 





,detait- styles.css?rel=..8135790855:111 
image-titte { 

font-fanily: airstreamregular; 

color: Owhite; 

text-shadow: 国 rqbat9，9，9，8.9) 1px 


font-size: 40px; 





Inherited from div.detait-image-frame | 
detail— Styles. css?rel=..8135790855:182 Fiter 国 Showall 
image-frame { | 

position: retativei | *eatar jrgb(2. 


图 4-26 ”更 漂亮 的 效果 
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既然 .detail-image-title 的 样式 设置 已 经 完成 ， 就 可 以 为 其 设置 position: absoLute， 
使 浏览 器 将 其 置 于 .detail-image-frame 中 的 精确 位 置 上 。 指 定 bottom: 一 16px 以 及 left: 
4px, 将 .detail-image-title 放 在 .detail-image-frame 的 底 边 之 下 、 左 边 之 内 的 位 置 。( 坐 
标 值 可 以 为 负数 。) 


.detail-image-title { 
position: absolute; 
bottom: -16px; 
Left: 4px; 


font-family: airstreamreguLar; 
color: white; 
text-shadow: rgba(0, 0, 0, 0.9) lpx 2px 9px; 
font-size: 40px; 
} 


保存 样式 文件 ， 可 以 在 浏览 嚣 中 看 到 .detail-image-title 现 在 已 在 图 片 底部 偏 左 的 位 置 。 
Ottergram 的 样式 已 十 分 别致 了 ( 如 图 4-27 所 示 )。 


0®/ Down 





€ DC Dlocalhost3000 安 
[| Elements Console Sources Network Timeline Profiles Resources 为 





x| me 





OTTERGRAM 


<html> 
Pp <head>..</head> 
v <body> 
*<script type="text/javascript” i __bs script > ts 
<script async src="/browser-: lient, ></script> 
p<header class="main-header">. ee 
Y<main class="main-content"> 
P<ul class="thumbnail-list">.</ul> 
vw<div class="detail-image-container"> 
vw<div class="detail-image-frame"> 
<img class="detail-image" src="img/otter1,ipg" alt> 
<span class="detail-image-title">Stayin' Alive</span> == $0 
</div> 
</div> 
</main> 
<div style="display: block;"></div> 
</body> 


</html> 
html body main.main-content div.detaikimage-container dvdetalHimagefame Ee 
Styles Event Listeners DOM Breakpoints Properties 

Filter :hov 物 .cls +, 


element.style { 
} 





position 





“detail-image-title { styles.css?rel=.8135963644:111 
position: absolute; 
bottom: -16px; 








left: 4px; 
font-family: atrstreamregutar 
cotor; Dwhit 
text-shadow: 国 roba(o， 0, 9，9.9) 1px 2px 9px; 
font-size: 40px; -16 
} 
herted om div. detail-image-frame Fitter 国 Showall 
“detail-image-frame { styles.css?rel=.81 44: 1 
position: relative; Pbottom -16px 





图 4-27 效果 极 好 


稍 事 休息 ， 好 好 欣赏 下 劳动 成 果 吧 。 添 加 flexbox 样 式 之 后 的 Ottergram 已 是 动态 流体 布局 了 。 
下 一 章 将 学 习 如 何 让 布局 根据 窗口 尺寸 自 适 应 。 











使 用 嫁 体 查询 完成 目 适应 
布局 








本 章 将 介绍 一 种 能 够 根据 浏览 器 窗口 大 小 等 特征 切换 样式 的 技术 。 仅 需 使 用 少量 代码 , 就 可 
在 大 屏 上 展示 一 种 不 同 的 布局 。 而 随 着 浏览 锅 窗 口 的 大 小 变化 ,页 面 布局 无 须 刷 新 ,也 能 实时 切 
换 。 图 5-1 展 示 了 两 种 不 同情 况 下 的 布局 。 











OOO Tower 
< © DD localhost:3000 








和 
加 加 





图 5-1 两 种 布局 


这 种 行为 的 行业 术语 叫 响应 式 站 点 (responsive website )。 不 幸 的 是 ， 该 术语 常常 会 造成 误 
解 一 一 一 些 人 可 能 认为 它 的 意思 是 “速度 很 快 的 网 站 ”或 者 “有 视觉 动画 的 网 站 ”。 因 此 还 是 使 
用 自 适 应 布局 ( adaptive layout ) 这 个 术语 比较 好 。 

根据 当前 浏览 器 的 条 件 添加 备用 样式 的 方式 有 很 多 种 。 推 荐 方式 是 先 为 最 小 屏幕 书写 样式 ， 
随后 使 用 媒体 查询 ， 当 视 口 (浏览 器 可 见 区 域 ) 大 小 超出 一 定 靖 值 时 ， 使 用 添加 的 重 载 样式 。 

对 传统 浏览 器 ( 如 开发 Ottergram 时 使 用 的 浏览 器 ) 来 说 ， 视 口 即 浏览 器 窗口 所 呈现 的 部 分 ， 
很 直观 。 但 在 移动 浏览 器 上 就 复杂 一 些 ， 因 为 移动 浏览 器 有 多 种 视 口 ， 每 一 种 在 页 面 演 染 过 程 中 
都 起 作用 。 
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前 端 开发 者 需要 关注 的 是 布局 视 口 (layout viewport， 有 时 也 称 作 真 实 视 口 )。 布局 视 口 告诉 
浏览 器 :“ 假 设 我 的 实际 宽度 为 980 像 素 ， 然 后 再 绘制 页 面 。 
而 用 户 更 关心 的 则 是 视觉 视 口 ( visual viewport ), 他 们 在 这 上 面 放 大 、 缩 小 页 面 (如 图 $-2 所 示 )。 











一 





布局 视 口 





图 5-2 ”视觉 视 口 和 布局 视 口 


如 果 现 在 就 拿手 机 查看 Ottergram， 看 到 的 效果 就 会 像 图 5-2 那 样 ， 首 先 出 现 页 面 左上 角 的 放 
大 部 分 。 地 庸 多 言 ， 就 算 用 户 能 够 手动 缩小 ， 也 不 会 有 人 愿意 看 到 这 种 默认 效果 。 

此 前 提 到 过 开发 Ottergram 的 思想 是 移动 优先 , 大 体 确 是 如 此 。 标记 和 样式 都 是 按照 移动 和 
的 原则 一 一 使 用 最 少 的 标记 , 先 为 最 底层 元 素 添 加 样式 一 一 进行 编写 的 。 现 在 需要 告诉 浏览 器 
当 使 用 怎样 的 布局 视 口 。 


5.1 重 置 视 口 


在 第 3 章 中 ， 我 们 为 Ottergram 添 加 了 normalize.css， 确 保 不 同 浏览 絮 的 默认 样式 是 相同 的 。 
有 了 这 些 默 认 样 式 ， 才 能 更 自信 地 编写 自己 的 CSS， 因 为 我 们 知道 它 在 不 同 浏览 器 中 的 展现 是 
一 致 的 。 

针对 布局 视 口 ， 也 需要 做 一 些 类 似 的 事 。 正 如 不 同 浏 览 器 的 默认 样式 可 能 不 尽 相 同 ， 每 个 
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浏览 器 都 可 能 有 自己 的 默认 布局 视 口 。 不 过 ， 不 像 使 用 normalize.css 那 样 ， 我 们 不 会 将 所 有 浏 
览 器 的 视 口 都 设置 成 同一 个 值 ， 而 是 使 用 一 个 <meta> 标 签 告诉 浏览 器 使 用 最 佳 尺寸 展 现 
Ottergram。 

在 index.html 中 加 入 一 个 <meta> 标 签 ， 告 知 浏览 器 布局 视 口 的 宽度 与 设备 屏 宽 相 同 。 同 时 将 
initial-scale 值 设置 为 1， 使 页 面 缩放 值 为 100%。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"> 
<link rel="stylesheet" href="stylesheets/styles.css"> 
<title>0ttergram</title> 
</head> 
































记得 保存 文件 。 我 们 将 布局 视 口 设置 成 了 理想 视 口 ， 即 浏览 絮 厂 商 推 荐 的 、 某 种 设备 上 的 最 
佳 视 口 尺寸 。 理 想 视 口 有 很 多 种 尺寸 ， 因 为 设备 种 类 和 浏览 器 类 型 太 多 了 。 
表 5-1 对 不 同类 型 的 视 口 进行 了 总 结 。 


表 5-1 不 同 视 口 概览 












































视 口 描 述 设备 类 型 

视 口 等 同 于 浏览 器 窗口 区 域 ， 作 为 <html> 元 素 的 容器 台式 机 、 笔 记 本 电脑 
布局 视 口 虚拟 屏幕 ， 大 于 设备 实际 屏幕 ， 用 于 计算 页 面 布局 移动 设备 

视觉 视 口 用 户 在 设备 屏幕 上 看 到 的 可 缩放 区 域 ， 缩 放 对 页 面 布局 不 会 产生 影响 移动 设备 

理想 视 口 特定 设备 上 的 特定 浏览 器 的 最 佳 尺 十 移动 设备 











启动 browser-sync, 并 Chrome 的 开发 者 工具 ,找到 Elements 菜 单项 左 侧 的 Toggle Device Mode 
(切换 设备 模式 ) 按钮 加。 图 $-3 展 示 了 按钮 的 位 置 。 


图 $-3 ”Toggle Device Mode 按 钮 


点 击 按钮 ， 激 活 设备 模式 。 可 以 看 到 ，Ottergram 现 在 显示 在 一 个 模拟 的 智能 手机 上 ,还 有 一 
个 用 于 选择 不 同 手机 类 型 和 屏幕 尺寸 的 菜单 。 点 击 预 设 尺 寸 下 面 的 灰色 区 域 , 就 可 以 在 大 中 小 尺 
寸 之 间 切 换 。 此 外 ， 还 有 一 个 快速 选择 屏幕 方向 的 按钮 。 图 5-4 展 示 了 本 书 创作 时 在 设备 模式 下 
的 截图 ， 你 看 到 的 效果 可 能 有 所 不 同 ， 因 为 开发 者 工具 会 经 常 更 新 。 
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预 置 设备 菜单 ed ne 
D ottergram x 
€ localhost:3000/# 
exus SX v 411 x 731 94%v © ; | | Ele 
响应 式 尺 寸 选 择 栏 
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p<script + 
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<header c 






p<main cla 
<div styl 
</body> 
</htm\ 

















图 5-4 ”使 用 设备 模式 进行 响应 式 测试 

















有 了 <meta> 元 素 后 ，Ottergram 便 能 够 在 智能 手机 这 样 的 小 屏幕 上 完整 展示 。 而 在 屏幕 更 大 
一 些 的 设备 上 ( 如 平板 电脑 、 笔 记 本 电脑 等 ) 使 用 另 一 种 不 同 的 布局 可 能 更 合适 。 接 下 来 将 结合 
flexbox 和 媒体 查询 技术 ， 应 用 不 同 的 布局 样式 。 

在 继续 之 前 ， 请 再 次 点 击 名 按钮 ， 退 出 设备 模式 。 


5.2 添加 媒体 查询 


媒体 查询 允许 我 们 将 CSS 声 明 进 行 分 组 , 指定 应 用 这 些 样式 的 条 件 , 这些 条 件 可 能 类 似 于 “ 屏 
幕 最 低 宽度 为 640px” 或 “屏幕 宽度 大 于 高 度 且 拥有 高 像素 密度 ”。 

媒体 查询 语法 以 amedia 开 头 ， 接 下 来 是 匹配 条 件 ， 再 接着 是 一 组 大 括号 ， 括 号 里 面 是 整个 
样式 声明 。 来 看 下 它 究竟 是 什么 样 的 。 
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先 从 styles.css 末 尾 添加 媒体 查询 。 当 设备 宽度 在 768px ( 通常 是 平板 电脑 的 宽度 ) 及 以 上 时 ， 
我 们 新 增 的 媒体 查询 样式 就 会 生效 。 

‘etail mayestitte { 

人 人 

@media all and (min-width: 768px) { 


/* 此 处 放置 样式 */ 
} 


@media 之 后 是 媒体 类 型 all。 媒体 类 型 一 开始 是 用 于 区 分 不 同 设备 的 ， 如 智能 电视 、 手 持 设 
备 等 。 不 幸 的 是 ， 浏 览 器 并 没有 精确 实现 ， 所 以 只 能 指定 为 atl。 唯 一 不 用 指定 at1 的 情况 是 需 
要 设置 打印 样式 时 ， 这 时 候 可 以 放心 使 用 print 媒 体 类 型 。 

在 媒体 类 型 之 后 是 使 用 样式 的 条 件 , 这 里 使 用 的 是 min-width。 这 条 件 看 起 来 很 像样 式 声明 。 

为 实现 图 5-1 所 示 的 效果 , 需要 改变 ,main-content 元 素 的 flex-direction, 这 样 就 会 让 缩 
略图 列表 与 大 图 并 排 显示 ,我 们 不 希望 缩 略 图 列表 导致 浏览 器 滚动 ,而 是 独立 于 浏览 器 窗口 深 动 ， 
因此 需要 添加 overflow: hidden 声 明 。 

在 styles.css 末 尾 的 媒体 查询 中 添加 如 下 样式 : 





Gmedia all and (min-width: 768px) { 


.main-content { 
flex-direction: row; 
overflow: hidden; 

} 

} 


当 你 保存 文件 并 拉 宽 浏览 器 窗口 触发 媒体 查询 时 ,可 能 会 被 结果 吓 到 , 因为 目前 页 面 看 起 来 
应 该 像 图 5-5 那 样 。 不 必 担 心 ， 几 行 代码 就 可 以 解决 问题 。 


Oe /To | 


€ FC [ localhost3000/# 














图 5-5 ”混乱 的 页 面 
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缩 略图 需要 排 成 一 列 ， 而 不 是 一 行 。 这 操作 起 来 很 简单 ， 因 为 你 使 用 的 是 flexbox 布 局 。 在 媒 
体 查 询 中 加 入 一 个 CSS 声 明 语 句 块 , 将 .thumbnail-1list 的 flex-direction 设 置 为 column。 


Gmedia all and (min-width: 768px) { 
.main-content { 
flex-direction: row; 
overflow: hidden; 
} 


.thumbnail-list { 
flex-direction: column; 
} 
} 


保存 styles.css， 人 情况 大 有 改善 ( 如 图 5-6 所 示 )1 


多 | NN oweroram ER | 
€ DC 门 Ilocaihost3000/# 地 
EE | so coneoe so > 
0 H <html> 
» <head>-.</head> 
-2 的 
mT 
Styles Event Listeners DOM Breakpoints Properties 
:hov 和 .cls +, 
elenent. style { 
} 











x |m lle] 












Styles.css?rel=.5350979116; 
Li body { 
display: flex; 
flex-direction: colunn; 
font sizc: 62.5%; 


background; > 
目 rgb(149，194，215)- 


转 Showall 


background-attachment 
| = scroll 
izesminscssia ，background-ctip 
border-box 

» backoround-color 

国 rgb(149，194,，215) 
sheet 

ound-image 





图 5-6 将 fLex-direction 设 置 为 coLumn 之 后 


根据 设计 ， 缩 略图 列表 应 该 在 左 侧 ， 修 改 .thumbnait-List 的 order 样 式 可 以 实现 该 效果 。 
此 前 我 们 将 order 设 置 为 2, 使 ,thumbnaiL-List 显 示 在 .detaiL-image-container 下 方 。 现 在 ， 
在 styles.css 的 媒体 查询 中 将 order 设 置 为 0， 以 便 它 遵循 源 顺 序 ， 这 样 一 来 位 置 就 对 了 。 


Gmedia all and (min-width: 768px) { 
.main-content { 
flex-direction: row; 
overflow: hidden; 
} 


.thumbnail-list { 
flex-direction: column; 
order: 0; 

} 

} 


保存 文件 并 确认 缩 略 图 列表 出 现在 页 面 左 侧 。 
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差不多 就 要 完成 啦 ! 在 styles.css 中 给 ,thumbnaiL-List 和 .thumbnaitL-item 添 加 一 些 样式 ， 
使 尺寸 和 空 际 显得 更 漂亮 一 些 。 


Gmedia all and (min-width: 768px) { 
.main-content { 
flex-direction: row; 
overflow: hidden; 
} 


.thumbnail-list { 
flex-direction: column; 
order: 0; 
margin-Left: 20px; 

} 


.thumbnail-item { 
max-width: 260px; 
} 


.thumbnail-item + .thumbnail-item { 
margin-top: 20px; 
} 
} 


再 次 保存 文件 ,切换 到 浏览 器 。 现 在 无 论 浏览 右 窗 口 是 
5-7 所 示 )。 








DO | Down 


| 二 [onergram 
六 | 三 € 3 CC |[ localhost:3000/¢ 








€ PC Dlocalhost:3000/# 








OTTERGRAM 








图 5-7 ”响应 式 布 


dl 





Ottergram 项 目 正 在 稳步 前 进 ! 我 们 已 经 创建 了 一 个 又 美观 .又 可 以 适应 多 种 屏幕 尺寸 的 网 页 。 
下 一 章 开始 使 用 JavaScript 为 项 目 添加 交互 功能 。 
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5.3 初级 挑战 : 屏幕 方向 


当前 的 媒体 查询 是 根据 视 口 宽度 来 改变 布局 的 。 我 们 可 以 将 视 口 分 为 两 类 : 高 度 大 于 宽度 的 
视 口 和 宽度 大 于 高 度 的 视 口 。 这 就 是 视 口 可 能 的 两 种 方向 〈orientation ) 模式 。 
到 MDN 中 查找 媒体 查询 的 相关 文档 ， 并 更 新 媒体 查询 ， 使 布局 根据 屏幕 方向 而 非 宽度 改变 。 


5.4 ”延展 阅读 : flexbox 布局 通用 解决 方案 与 bug 


Philip Walton 是 一 位 开发 者 ， 他 维护 了 两 份 非常 重要 的 flexbox 资 源 。 第 一 份 是 Solved by 
Flexbox 网 站 ( philipwalton.github.io/solved-by-flexbox )， 该 网 站 提供 了 用 flexbox 实 现 常见 布局 的 
demo 以 及 创建 它们 所 需 的 信息 。 不 用 flexbox 的 话 ， 其 中 某 些 布局 真 的 很 难 实现 。 

第 二 份 资源 是 Flexbugs， 地 址 是 github.com/philipwalton/flexbugs 。flexbox 很 棒 ， 但 也 并 非 完 
美 。Flexbugs 提 供 了 开发 者 使 用 flexbox 时 遇 到 的 常见 问题 的 解决 方案 和 变通 办 法 。 这 些 信 息 由 社 
区 中 遇 到 问题 的 开发 者 提供 ， 列 表 也 得 到 了 很 好 的 维护 。 


5.5 高 级 挑战 : 圣杯 布局 


在 开始 本 挑战 前 , 请 先 确 保 已 复制 了 一 份 代码 ! 完 成 本 挑战 需要 对 标记 和 样式 进行 重大 改动 ， 
所 以 请 使 用 副本 代码 完成 本 挑战 ， 原 版 代码 还 得 留 着 继续 下 一 章 的 学 习 。 

参考 Solved by Flexbox ， 在 Ottergram 中 实现 圣杯 布局 ( Holy Grail layout )。 创 建 带 缩 略图 的 
第 二 个 导航 栏 ， 并 将 其 放 在 视 口 的 另 一 侧 。 

记得 在 页 面 底部 添加 页 脚 。 使 用 <footer> 标 签 ， 并 在 其 内 部 加 入 一 个 <h1>。 













































































JavaScript 事 件 处 理 




















你 知道 水 铬 有 一 项 很 醋 的 技能 吗 ? 睡觉 的 时 候 ， 为 了 防止 漂 走 ， 它 们 会 手 牵 着 手 。 在 学 习 


JavaScript 事 件 回调 的 时 候 ， 在 脑海 中 想象 这 个 场景 就 好 了 。 























JavaScript 是 一 门 通过 操作 页 面 中 的 DOM 元 素 和 CSS 样 式 来 为 网 站 添加 交互 的 编程 语言 。 起 


初 , 它 是 为 非 专 业 编程 人 员 设 计 的 。 然 而 随 着 发 展 壮 大 ， 如 今 它 








已 被 应 用 于 多 种 应 用 开发 ， 如 访 





问 Gmail 或 者 Netflix 等 站 点 的 时 候 ， 你 就 是 在 与 JavaScript 程 序 进行 交互 。 事 实 上 ，Atom 文 本 编辑 





器 也 是 一 个 用 JavaScript 编 写 的 桌面 应 用 。 














尽管 JavaScript 功 能 强大 并 且 使 用 广泛 , 不 过 像 其 他 编程 语言 一 样 , 它 也 有 不 足 。 但 随 着 不 断 
开发 Ottergram 和 本 书 中 的 其 他 项 目 ， 你 会 逐渐 掌握 如 何 对 JavaScript 用 其 所 长 ， 避 其 所 短 。 








JavaScript 有 不 同 的 版 本 ， 本 书 中 的 项 目 涉及 其 中 三 个 版 本 ， 
范 的 修订 版 。 表 6-1 对 这 几 个 版 本 进行 了 总 结 。 


均 为 ECMAScript (ES ) 标准 规 


表 6-1 ”本 书 中 使 用 的 JavaScript 版 本 





























ECMAScript 版 本 发 布 日 期 备 注 
3 1999 年 12 月 ”得 到 最 广泛 支持 的 版 本 ; 吉 括 了 变量 、 类 型 、 国 数 等 大 部 分 你 会 用 到 的 语言 特性 
5 2009 年 12 月 ”向 后 兼容 ， 新 增 了 一 些 语法 特性 ， 如 可 预防 语言 中 易 出 错 用 法 的 严格 模式 
6 2015 年 6 月 包含 新 的 语法 和 语言 特性 ; 在 本 书写 作 之 时 , 多 数 浏览 器 尚未 支持 ES6, 不 二 ES6 
代码 可 以 转换 为 ES5 代 码 ， 从 而 能 够 在 多 数 训 览 器 上 使 用 














本 章 将 使 用 JavaScript 来 让 Ottergram 拥 有 交互 性 : 当 用 户 点 击 一 个 缩 略 图 的 时 候 ， 大 图 和 大 





图 标题 都 会 发 生变 化 。 























为 了 达成 这 个 效果 ,首先 需要 编写 一 个 读 取 图 片 URL 并 将 其 展示 在 大 图 区 域 的 JavaScript 函 数 


《其 中 包含 了 一 系列 浏览 锅 需 要 执行 的 步 又 )。 接 着 ， 要 确保 缩 略 








图 被 点 击 时 这 个 函数 会 运行 。 当 


然 ， 也 可 以 男 外 写 一 个 函数 来 隐藏 大 图 区 域 ， 并且 在 按 下 Esc 键 时 运行 这 个 函数 。 











本 章 结束 后 ，Ottergram 将 能 够 展示 每 一 张 水 儿 的 大 图 ( 如 图 





6-1 所 示 )。 
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图 6-1 点 击 缩 略 图 改变 大 图 和 大 网 标题 





编写 这 些 函 数 时 , 将 会 用 到 一 系列 与 页 面 交 互 的 浏览 器 预定 义 接口 。 这 样 的 预定 义 接 口 有 很 
多 ， 这 里 只 会 涉及 与 当前 任务 相关 的 几 个 。 如 果 感 兴趣 ， 可 以 在 MDN ( developer.mozilla.org/en- 
US/docs/Web/APIL/Element ) 中 了 解 更 全 面 的 内 容 。 


6.1 准备 锚 标签 


在 添加 JavaScript 交 互 功能 之 前 , 需要 对 标记 进行 少量 的 修改 。 虽然 现在 缩 上 略图 被 销 标 签 包 庄 
着 ， 但 实际 上 这 些 标签 没有 链接 到 任何 资源 ， 而 是 使 用 # 作 为 href 属 性 的 值 ， 让 浏览 器 停留 在 同 
一 个 页 面 。 为 了 使 点 击 缩 略 图 能 够 引发 一 些 有 趣 的 变化 ， 需 要 在 这 里 做 一 些 改动 。 

首先 ， 除 保留 index.html 中 的 5 个 , thumbnail-item 元 素 外 ,市 掉 其 余 全 部 内 容 一 一 现在 不 再 
需要 这 些 重复 的 内 容 了 ， 因 为 当前 布局 已 经 不 错 了 。 

然后 , 修改 锚 标签 的 href 属 性 的 值 , 不 再 使 用 #, 而 是 设置 为 每 个 <img> 标 签 对 应 的 src 的 值 。 

这 种 对 HTML 的 重复 修改 可 以 借助 Atom 来 完成 。 与 其 他 的 文本 编辑 器 一 样 ，Atom 也 有 查找 
并 替换 文本 的 功能 。 选 择 Find 一 Find in Buffer 或 者 使 用 快捷 键 Commond +F ( Control+F ), 在 编 
辑 器 窗口 的 底部 打开 Find in Buffer 面 板 ( 如 图 6-2 所 示 )。 








要 查找 的 文本 一 是 宇 中 
赫 换 文本 一 - 攻 ， 人 人 Replace Replace A < 一 一 Replace All 按 钮 









图 6-2 ”使 用 Atom 的 查找 蔡 换 功能 


在 Find in current buffer 文 本 框 中 输入 #， 在 Replace in current buffer 文 本 框 中 输入 img/otter.jpg， 
然后 点 击 右 下 角 的 Replace All 按 钮 。 

这 一 步 会 将 所 有 <a href="#"> 标 签 修改 为 <a href="img/otter.jpg">。 现 在 只 需 手动 给 
每 个 标签 加 上 相应 的 序号 就 可 以 了 (如 img/otter1l.jpg、img/otter2.jpg 锥 。 
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按 下 Esc 键 关闭 Find in Buffer 面 板 。index.html 应 如 下 所 示 : 


<ul class="thumbnail-list"> 
<li class="thumbnail-item"> 
‘a href="#": 
<a href="img/otterl.jpg"> 
<img class="thumbnail-image" src="img/otterl.jpg" alt=""> 
<span class="thumbnail-title">Barry</span> 
</a> 
</li> 
<li class="thumbnail-item"> 
<a_href="#"> 
<a href="img/otter2.jpg"> 
<img class="thumbnail-image" src="img/otter2.jpg" alt=""> 
<span class="thumbnail-title">Robin</span> 
</a> 
</li> 
<li class="thumbnail-item"> 
.a hrefo'#'": 
<a href="img/otter3.jpg"> 
<img class="thumbnail-image" src="img/otter3.jpg" alt=""> 
<span class="thumbnail-title">Maurice</span> 
</a> 
</li> 
<li class="thumbnail-item"> 
<a href="#"> 
<a href="img/otter4.jpg"> 
<img class="thumbnail-image" src="img/otter4.jpg" alt=""> 
<span class="thumbnail-title">Lesley</span> 
</a> 
</li> 
<li class="thumbnail-item"> 
<a_href="#"> 
<a href="img/otter5.jpg"> 
<img class="thumbnail-image" src="img/otter5.jpg" alt=""> 
<span class="thumbnail-title">Barbara</span> 
</a> 
</li> 
</ul> 




















要 让 JavaScript 可 以 使 用 销 元 素 , 还 得 为 它们 添加 额外 的 属性 。 当 使 用 CSS 控 制 样式 时 ,通过 
类 名 选择 器 来 关联 页 面 中 的 元 素 ， 而 JavaScript 则 使 用 数据 (data) 属性 。 

与 你 使 用 过 的 其 他 HTML 属 性 一 样 ， 数 据 属性 对 浏览 器 而 言 也 没有 什么 特殊 的 含义 ， 这 与 之 
前 使 用 过 的 src 和 href 不 同 。 数 据 属性 唯一 的 要 求 就 是 属性 名 要 以 data- 开 始 。 使 用 自 定 义 的 数 
据 属性 便于 指定 JavaScript 与 哪个 HTML 元 素 进 行 交互 。 

从 技术 上 讲 ， 在 JavaScript 中 可 以 使 用 类 名 来 访问 页 面 元 素 ， 数据 属性 也 可 以 用 于 样式 选择 
器 一 一 但 不 推荐 这 样 做 ， 因 为 JavaScript 和 CSS 不 依赖 相同 属性 的 话 ， 页 面 会 更 好 维护 。 

请 按 下 面 给 出 的 代码 来 更 新 index.html 中 销 标 签 的 数据 属性 。 请 注意 ， 代 码 中 的 换行 是 为 了 
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在 任何 页 面 中 都 可 以 正确 地 展示 。 你 可 以 根据 喜好 来 选择 是 否 换行 ， 这 不 会 对 浏览 需 造 成 影响 。 
<li class="thumbnail-item"> 
<a href="img/otterl.jpg" data-image-role="trigger" 
data-image-title="Stayin' Alive" 
data-image-urL="img/otter1.jpg"> 
<img class="thumbnail-image" src="img/otterl.jpg" alt=""> 
<span class="thumbnail-title">Barry</span> 
</a> 
</li> 
<li class="thumbnail-item"> 


<a href="img/otter2.jpg" data-image-role="trigger" 


</a> 
</Li> 


data-image-title="How Deep Is Your Love" 
data-image-url="img/otter2.jpg"> 
<span class="thumbnail-title">Robin</span> 


<img class="thumbnail-image" src="img/otter2.jpg" alt=""> 


<li class="thumbnail-item"> 


<a href="img/otter3.jpg" data-image-role="trigger" 


data-image-title="You Should Be Dancing" 
data-image-url="img/otter3.jpg"> 
<img class="thumbnail-image" src="img/otter3.jpg" alt=""> 
<span class="thumbnail-title">Maurice</span> 
</a> 
</li> 


<li class="thumbnail-item"> 
<a href="img/otter4.jpg" data-image-role="trigger" 


data-image-title="Night Fever" 
data-image-url="img/otter4.jpg"> 
<img class="thumbnail-image" src="img/otter4.jpg" alt=""> 
<span class="thumbnail-title">Lesley</span> 
</a> 
</li> 


<li class="thumbnail-item"> 


<a href="img/otter5.jpg" data-image-role="trigger" 





data-image-title="To Love Somebody" 
data-image-urL="img/otter5. jpg"> 
<img class="thumbnail-image" src="img/otter5.jpg" alt=""> 
<span class="thumbnail-title">Barbara</span> 
</a> 
</li> 
为 大 图 添加 数据 属 








盟 性 ， 如 下 : 


<div class="detail-image-container"> 
<div class="detail-image-wrapper"> 
<img class="detail-image" data-image-role="target" src="img/otterl.jpg" alt=""> 
</div> 
</div> 


<span class="detail-image-title" data-image-role="title">Stayin' Alive</span> 
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JavaScript 代 码 可 以 通过 这 些 数据 属性 来 访问 页 面 中 的 特定 元 素 ， 因 为 浏览 器 允许 JavaScript 
查询 网 页 的 内 容 。 举 例 来 说 ， 你 可 以 找到 匹配 某 个 选择 器 的 所 有 内 容 ， 选 择 器 的 形式 如 
data-image-role="trigger"。 一 旦 查询 找到 了 匹配 项 ， 就 会 返回 匹配 元 素 的 引用 。 

取得 一 个 元 素 的 引用 之 后 ,就 可 以 对 这 个 元 素 进行 很 多 操作 ; 读 取 或 修改 它 的 属性 值 、 改 变 
它 内 部 的 文本 , 其 至 访问 它 周 围 的 元 素 。 当 通过 引用 来 修改 元 素 的 时 候 , 浏览 器 会 立即 更 新 页 面 。 

本 章 将 使 用 JavaScript 代 码 来 获取 锚 元 素 和 大 图 元 素 的 引用 , 读 取 锚 的 数据 属性 , 并 且 改 变 大 
图 的 src 属 性 的 值 一 一 这 就 是 Ottergram 交 互 功 能 的 原理 。 

你 可 能 注意 到 了 ， 这些 销 标签 以 及 大 图 的 <img> 标 签 都 包含 data-image-role 
门 的 值 是 不 同 的 。 
虽然 不 是 必须 为 销 标 签 和 <img> 标 签 使 用 相同 的 数据 属性 名 ,但 是 推荐 这 么 做 ， 因 为 可 以 提 
醒 开 发 者 这 些 元 素 具 有 相同 的 JavaScript 行 为 。 

在 HTML 中 最 后 一 项 必需 的 改动 是 : 告诉 HTML 执 行 JavaScript。 通 过 在 index.html 中 添加 
<Sscript> 标 签 来 实现 这 一 点 ， 这 个 <script> 标 签 指向 即将 创建 的 scriptsmain .js 文件 。 
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</div> 
</div> 
</main> 
<script src="scripts/main.js" charset="utf-8"></script> 
</body> 
</html> 


当 浏 览 咒 发 现 <script> 标 签 时 ， 它 就 会 立即 运行 引用 文件 中 的 代码 。JavaScript 不 能 在 浏览 
器 泻 染 HTML 之 前 访问 HTML 中 的 元 素 ， 因 此 将 <script> 放 到 body 的 底部 可 以 保证 JavaScript 在 
所 有 的 标记 被 解析 之 后 再 运行 。 

现在 HTML 已 经 做 好 了 与 即将 编写 的 JavaScript 关 联 的 准备 。 在 切换 文件 之 前 ， 记 得 保存 


index.html。 


6.2 第 一 个 脚本 


首先 要 创建 一 个 scripts 文 件 严 和 main.js 文 件 。 回 忆 一 下 如 何 使 用 Atom 编 辑 器 新 建文 件 夹 : 按 
下 Control 键 ， 右 击 面板 左 侧 的 ottergram， 然 后 点 击 弹 出 菜单 中 的 New Folder， 最 后 在 出 现 的 提示 
框 中 输入 scripts。 

接着 按 下 Control 键 , 右 击 面板 左 侧 的 scripts 并 选择 New File。 在 提示 框 中 会 有 预 输入 的 scripts/ 
字样 ， 在 其 后 输入 main.js， 按 下 回 车 。 

确保 当前 文件 夹 结构 如 图 6-3 所 示 。 
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@@ i ottergram 
ee 7 items, 226.46 GB available 
Name 和 Kind 
> img Folder 
@ index.html HTML text 
v Ml scripts Folder 
习 main.js JavaScript 
了 国 stylesheets Folder 
> MM fonts Folder 
司 styles.css CSS 


图 6-3 ”ottergram 文 件 夹 结构 

main.js 这 个 名 字 对 浏览 器 来 说 没有 什么 特殊 的 含义 , 不 过 这 是 很 多 前 端 开发 者 约定 俗 成 的 命 
名 习惯 。 

切换 到 JavaScript 之 前 的 最 后 一 件 事 就 是 启动 browser-sync， 但 要 先 对 之 前 使 用 过 的 命令 进行 
一 些 改动 : 

browser-sync start --server --browser "Google Chrome" 

--files "*.html, stylesheets/*.css, scripts/*.js" 

在 文件 列表 中 加 入 路 径 scripts/*.js， 使 browser-sync 除 了 能 监听 HTML 和 CSS 之 外 ， 还 能 监听 

JavaScript 的 改动 。 








6.3 oOttergram 中 的 JavaScript 描述 





先 制 订 计 划 后 编码 是 一 个 很 好 的 习惯 。 下 面 是 需要 在 Ottergram 中 做 的 事情 的 简单 描述 。 
(1) 获取 所 有 的 缩 略 图 。 

(2) 监控 每 个 缩 略图 的 点 击 事件 。 

(3) 如 果 发 生 了 点 击 ， 根 据 缩 略 图 的 信息 更 新 大 图 。 

可 以 将 第 3 点 再 拆 分 为 3 个 步骤 。 

(1) 从 缩 略 图 的 数据 属性 中 获取 图 像 的 URL。 

(2) 从 缩 略 图 的 数据 属性 中 获取 标题 文本 。 

(3) 将 图 像 和 标题 设置 到 大 图 上 。 

下 面 是 计划 的 图 解 ( 如 图 6-4 所 示 )。 
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获取 所 有 缩 略 图 ， 添 加 点 击 处 理 程序 


添加 点 击 处 理 程序 





本 


添加 点 击 处 理 程序 添加 点 击 处 理 程序 添加 点 击 处 理 程 





data-image-role="trigger" data-image-role="trigger" data-image-role="trigger" 


data-image-title="..." data-image-title="..." data-image-title="..." 
data-image-url="..." data-image-url="..." data-image-url="..." 











一 个 缩 略 图 被 点 击 时 …… 更 新 大 图 和 标题 


PT TT 





data-image-role="trigger" 





“目标 ” 
data-image-title="..." 


data-image-url="..." | 点 击 ‘img/otter4.jpg’ 


| 
‘Night Fever’ 
| ss a 























图 6-4 ”Ottergram 交 互 计划 


本 章 将 从 最 后 一 步 开 始 讲述 如 何 编写 代码 , 这 是 一 种 “ 自 底 向 上 ”的 方法 ,在 JavaScript 中 十 


6.4 声明 字符 串 变 


首先 为 每 个 添加 到 标记 中 的 数据 属性 创建 字符 串 变 量 。( 不 熟悉 这 些 术语 也 不 用 担心 ， 马 上 
会 解释 。) 
在 main.js 的 开头 添加 一 个 名 为 DETAIL IMAGE SELECTOR 的 变量 ， 并 且 赋 值 为 


'[data-image-role="target"]'。 














var DETAIL IMAGE SELECTOR = '[data-image-role="target"]'; 


这 部 分 代码 虽然 不 长 ， 但 是 值得 仔细 看 看 。 从 中 间 的 = 符号 看 起 ， 
将 









































这 是 一 个 赋值 操作 符 。 与 
号 





数学 中 不 同 , 等 号 在 JavaScript 中 不 意味 着 两 个 事物 相等 , 而 表示 “将 等 号 右边 的 值 赋 给 等 号 左边 
的 名 称 ”。 
在 表达 式 中 ， 等 号 的 右边 是 一 个 文本 字符 串 ' [data-image-role="target"]'。 字 符 串 是 
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指 一 个 由 单 引 号 分 隔 的 表示 文本 的 字符 序列 。 单 引号 中 的 文本 就 是 大 图 的 属性 选择 器 ,这 个 字符 
串 就 是 用 来 访问 相应 元 素 的 线索 。 

表达 式 左边 是 一 个 变量 声明 。 可 以 把 变量 想象 成 用 来 指定 某 个 值 的 一 个 标签 , 这 个 值 可 以 是 
数值 ， 也 可 以 是 字符 串 ( 如 本 例 ) 或 者 其 他 类 型 的 值 。 使 用 var 关 键 字 可 以 创建 一 个 叫 作 
DETAIL IMAGE SELECTOR 的 变量 。 

接 下 来 ,在 main.js 中 为 大 图 标题 选择 带 和 缩 略 图 锚 选 择 帮 声明 变量 。 同 样 把 字符 串 赋值 给 这 
些 选 择 器 。 

var DETAIL IMAGE SELECTOR = '[data-image-role="target"]'; 


var DETAIL TITLE SELECTOR = '[data-image-role="title"]'; 
var THUMBNAIL_ LINK _ SELECTOR = '[data-image-role="trigger"]'; 


所 谓 变量 , 顾名思义 就 是 可 以 对 其 进行 重新 赋值 的 量 ， 即 值 是 可 变 的 。 开 发 者 有 时 会 使 用 全 
大 写 的 变量 名 来 表示 这 个 变量 的 值 不 应 该 被 改动 , 这 是 一 个 约定 ; 其 他 语言 使 用 常量 来 声明 不 可 
改变 的 名 称 。JavaScript 正 在 转型 : ES5 没 有 常量 ,而 ES6 有 。 不 过 就 像 前 文 提 到 的 ，ES6 还 没有 得 
到 广泛 支持 。 在 常量 得 到 良好 支持 之 前 ， 可 以 先 遵循 当前 约定 来 标识 一 个 不 应 当 被 改变 的 值 。 

顺便 说 下 ,字符 串 既 可 以 由 单 引号 分 隔 ,， 也 可 以 由 双 引 号 分 隔 。 你 可 以 任 选 一 种 , 但 本 书 使 
用 单 引 号 ， 所 以 也 建议 你 至 少 在 本 书 的 项 目 中 遵从 这 个 约定 。 

如 果 你 想 要 使 用 双 引 号 , 那么 为 了 确保 浏览 器 可 以 正确 地 解析 所 有 代码 ,必须 转 义 字符 串 中 
的 所 有 双 引 号 。 要 转 义 一 个 字符 ， 需 要 像 这 样 在 字符 前 面 加 一 个 反 斜 杠 : 

var DETAIL IMAGE SELECTOR = "[data-image-role=\"target\"]"; 

使 用 单 引号 也 不 能 完全 保证 你 不 需要 转 义 字符 。 如 果 一 个 字符 串 由 单 引 号 分 隔 , 其 中 又 包含 
单 引 号 或 者 撤 号 ， 则 同样 需要 转 义 它们 。 
保存 main.js。 有 了 这 些 变量 ,就 可 以 在 Chrome 开 发 者 工具 中 玩 转 它们 了 。 


6.5 ”操作 控制 台 


开发 者 工具 中 非常 有 用 的 一 部 分 就 是 控制 台 ， 你 可 以 在 里 面 输入 JavaScript 代 码 并 且 立 即 执 
行 ， 这 对 迭代 式 地 编写 改变 页 面 的 JavaScript 代 码 尤 其 有 帮助 。 
在 开发 者 工具 中 ， 点 击 Console 标 签 ， 它 位 于 Elements 标 签 右 侧 ( 如 图 6-5 所 示 )。 
















































































[EDURREIETETESI Console So 


人 可 top YY Preserve log 


> 


图 6-5 ”选择 Console 标 签 


控制 台 有 一 个 输入 代码 行 的 提示 框 ， 点 击 > 符号 的 右 侧 使 控制 台 进 入 待 输入 状态 ( 如 图 6-6 
所 示 )。 


NN 
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Console 





> | 


图 6-6 ”控制 台 ， 待 输入 
在 控制 台中 输入 如 下 数学 表达 式 : 


137 + 349 


按 回 车 键 , 控制 台 会 打印 出 结果 ( 如 图 6-7 所 示 )。 











| 民 口 ] Elements Console Sources Netw 





人 可 top Preserve log 


> 137 + 349 
486 
| 


图 6-7 计算 数学 表达 式 


简单 来 说 ， 控 制 台 的 主要 工作 就 是 给 出 输入 代码 的 值 。 
代码 的 顺序 很 重要 。 如 果 需 要 某 些 项 作为 一 个 组 合 来 求 值 ， 可 以 用 小 括号 括 住 它们 。( 这 比 
不 用 括号 而 是 依赖 于 JavaScript 的 优先 级 要 简单 多 了 。) 在 控制 台中 输入 下 面 的 表达 式 : 


3*( (2*4)+(3+5)) 


按 回 车 键 ， 控 制 台 会 按照 正确 的 顺序 进行 运算 ( 如 图 6-8 所 示 )。( 顺便 说 下 ， 尽 管 为 了 保证 
可 读 性 ， 在 示例 的 数字 和 操作 符 间 加 入 了 空格 ,但 你 也 可 以 不 加 ， 这 对 控制 台 没 有 影响 。 ) 














[x a Elements Console Sources Netw 


© 是 top vv [Preservelog 


> 137 + 349 
486 

>3*( (2*4)+(3+5)) 
48 





> | 
图 6-8 计算 更 复杂 的 数学 表达 式 


现在 该 使 用 之 前 声明 的 变量 了 。 可 以 通过 点 击 控制 台面 板 左 上 角 的 S 图 标 , 也 可 以 使 用 快捷 
键 Command + 开 (Cntrol+ 开 ) 来 清空 控制 台中 的 内 容 。 

键入 DETAIL _IMAGE _SELECTOR。 当 键入 前 几 个 字母 的 时 候 ， 可 以 看 到 控制 台 已 经 提供 了 之 
前 创建 的 变量 的 自动 补 全 建议 了 ( 如 图 6-9 所 示 )。 
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[x 0 Elements Console Sources NN 
i 本 top vv (Preservelog 


> DEITAIL_IMAGE_SELECTOR 
[DETAIL_IMAGE_SELECTOR | 
DETAIL_TITLE_SELECTOR 





图 6-9 控制 台 自动 补 全 菜单 


按 下 Tab 键 来 选择 控制 台 提 供 的 自动 补 全 。 按 下 回 车 键 ， 控 制 台 显示 DETAIL_IMAGE_ 
SELECTOR 的 值 为 字符 串 " [data-image- rote="target"]"。 














[R 0 Elements Console Source 





人 可 top Preserve log 


> DETAIL_IMAGE_SELECTOR 
"[data-image-role="target"]" 


| 
图 6-10 ”控制 台 打印 变量 的 值 6 


( 尽管 main.js 中 使 用 的 是 单 引号 ,但 控制 台 打印 的 字符 串通 常 都 使 用 双 引 号 。) 
字符 串 是 JavaScript 的 五 个 基本 数据 类 型 之 一 。( 数值 和 布尔 值 也 是 其 中 的 两 个 )“ 基 本 ” 意 
味 着 它们 代表 的 都 是 简单 值 ， 这 个 简单 是 相对 于 接 下 来 将 学 到 的 JavaScript 复 杂 类 型 而 言 的 。 


























6.6 访问 DOM 元 素 


如 上 所 见 , 控制 台 可 以 访问 之 前 创建 的 变量 。 在 更 前 面 一 点 , 我们 说 过 要 用 这 些 变 量 来 访问 
页 面 元 素 。 现 在 可 以 试 一 下 ， 在 控制 台中 输入 如 下 代码 : 


document .querySeLector(DETAIL_IMAGE_SELECTOR) ， 


按 下 回 车 键 将 显示 大 图 的 HIML。 将 鼠标 悬 停 在 控制 台中 的 HIML 信 息 上 ， 可 以 看 到 页 面 中 
的 大 图 是 高 亮 的 ， 与 点 击 Elements 面 板 中 的 HTML 效 果 相 同 (如 图 6-11 所 示 )。 

在 控制 台 融 和 的 这 行 代码 中 ，document 是 浏览 器 内 置 的 变量 ， 可 以 通过 它 来 访问 网 页 。 它 
的 值 并 不 是 一 个 基本 类 型 ， 而 是 一 个 复杂 类 型 一 一 对 象 。 

document 对 象 对 应 整个 页 面 ， 它 为 获取 页 面 元 素 的 引用 提供 了 一 系列 方法 。 方 法 是 函数 的 一 
种 (是 被 明确 指定 了 所 有 者 的 函数 , 不 过 你 现在 不 需要 在 意 这 个 细节 ), 是 浏览 器 执行 操作 的 步骤。 
而 刚刚 在 控制 台中 输入 的 代码 使 用 的 就 是 querySetLector 方 法 。document .querySetector 中 的 点 
操作 符 (或 者 说 是 句点 ) 表示 要 访问 对 象 的 方法 。 
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eose ， 三 oteroram x We 
€ 3 CC ( localhost:3000/# 








x| mm ll 


安 | 
| 


民 上 帅 Eements Console Sources Network Timeline Profiles » 





© top v DPresevelog 

> DETAIL_IMAGE_SELECTOR 

¢ "[data-image-role="target"]" 

> document.querySelector (DETAIL_IMAGE_SELECTOR); 

< <img class="detail-image” data-image-role="target"” src="img/otterl.ipg" 
alt> 





> 


Maurice 


Barbara 





图 6-11 ”控制 台中 的 HTML 与 页 面 元 素 相对 应 


这 里 请 求 document 使 用 它 的 querySelector 方 法 找到 匹配 字符 串 '[data-image- 
role="target"] ' 的 元 素 。querySelector 返 回 一 个 找到 的 大 图 元 素 的 引用 ( 如 图 6-12 所 示 )。 


[本 | 


© 00 orn ”EE 
€ FC Dlocahost3000/s 


淮 
Mh 


OTTERGRAM 


documentoeo 


document .querySelector('[data-image-role="target"]') 








图 6-12 访问 由 document 和 document.querySelector 提 供 的 页 面 
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来 说 点 术语 吧 。 我 们 并 没有 真 “ 请 求 ”页 面 去 匹配 元 素 , 只 是 调用 了 document 的 query Selector 
方法 并 且 传 递 给 它 一 个 字符 串 。 这 个 方法 返回 了 一 个 大 图 元 素 的 引用 。 

调用 一 个 方法 可 以 让 它 执行 预先 设 定好 的 任务 。 大 多 数 时 候 ， 需 要 给 方法 传递 一 些 与 任务 
相关 的 参数 ， 参 数 要 写 在 方法 名 后 面 的 括号 中 。 根 据 任务 的 不 同 ， 方 法 可 能 会 返回 一 个 可 供 使 
用 的 值 。 

之 前 DETAIL IMAGE SELECTOR 已 被 赋值 为 ' [data-image-role="target"]'， 也 就 是 说 要 
把 它 传 递 给 querySelector。 

在 这 个 场景 下 ,querySelector 使 用 这 个 字符 串 来 搜索 任何 匹配 此 选择 器 的 元 素 。 搜索 的 时 
候 ，document 不 是 真 的 在 搜索 整个 页 面 ， 而 是 在 搜索 文档 对 象 模型 ( Document Object Model， 
DOM )。DOM 是 浏览 器 对 于 一 个 HTML 文 档 的 内 部 表示 ， 浏 览 器 通过 这 种 方式 来 读 取 和 解释 
HTIML。 

在 JavaScript 中 ， 可 以 通过 document 对 象 及 querySelector 这 样 的 方法 来 与 DOM 交 互 。 每 个 
HTML 标 签 在 DOM 中 都 有 一 个 对 应 的 元 素 , 使 用 JavaScript 可 以 与 每 个 元 素 进行 交互 。( 通常 说 到 
一 个 “元 素 ” 的 时 候 ， 都 是 指 一 个 “DOM 元 素 ”。 ) 

再 次 在 控制 台中 调用 document .querySelector，, 传递 DETAIL IMAGE SELECTOR 来 获取 一 
个 大 图 元 素 的 引用 ， 不 过 这 次 将 引用 赋值 给 一 个 名 为 detailImage 的 新 变量 : 
var detailImage = document.querySelector(DETAIL IMAGE SELECTOR); 


按 下 回 车 键 ， 控 制 台 会 打印 undefined ( 如 图 6-13 所 示 )。 不 要 慌 ， 这 不 是 个 错误 。 
















































































车 ll Elements Console Sources Network Timeline Profiles » J 
© 字 top v ODPreservelog 


> DETAIL_IMAGE_SELECTOR 
"[data-image-role="target”]" 
> document.querySelector(DETAIL_IMAGE_SELECTOR); 


<img class="detail-image"” data-image-role="target" src="img/otterl. ipg" 
alt> 


> var detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR); 
undefined 


图 6-13 ”在 控制 台中 声明 一 个 变量 


控制 台 没 做 错 , 这 里 是 在 告诉 你 : 声明 一 个 变量 并 没有 返回 值 。 在 JavaScript 中 用 undefined 
关键 字 来 表示 没有 值 。 

但 这 不 表示 detaiLImage 变 量 没 有 被 赋值 。 想 要 检查 这 一 点 ， 只 需 在 控制 台中 输入 detaiLImage 
然后 按 下 回 车 ， 就 可 以 看 到 大 图 的 HIML 表 示 ， 显 然 与 输入 document.querySelector 
(DETAIL_IMAGE_SELECTOR) 的 效果 是 一 样 的 (如 图 6-14 所 示 )。 
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© 0 0 全 全 ea > 
€ 3 © | localhost:3000/# 三 | 


民 帅 Eements Console Sources Network Timeline Profiles » 
OTTERGRAM 











x 加 | 丁 








© 辟 top 口 Preservelog 

> DETAIL_IMAGE_SELECTOR 

< "[data-image-role="target"]" 

》 document.querySelector(DETAIL_IMAGE_SELECTOR); 


<img class="detail-image” data-image-role="target” src="img/otterl.ipg” 
alt> 


> var detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR); 

< undefined 

》 detailImage 

< Ss class="detail-image" data-image-role="target" src="img/otterl.ipg"” 
alt> 





> | 





图 6-14 ”检查 detailImage 的 值 


这 样 做 有 什么 好 处 ”通过 把 引用 赋值 给 这 个 变量 , 可 以 在 任何 时 候 通 过 变量 名 使 用 被 引用 的 
元 素 。 因 此 ， 不 需要 每 次 都 输入 document .querySelector(DETAIL IMAGE SELECTOR) ， 只 输 
入 detailImage 就 可 以 了 。 

获取 到 大 图 的 引用 之 后 ， 改 变 它 的 src 属 性 就 很 轻松 了 。 在 控制 台中 , 将 detailImage.src 
赋值 为 'img/otter2.jpg'。 

detailImage.src = 'img/otter2.jpg'; 

使 用 点 操作 符 可 以 访问 detailImage 对 象 的 src 属 性 。 属 性 和 变量 相似 ， 只 不 过 它 属于 一 个 
特定 的 对 象 。 将 src 赋 值 (或 设置 ) 为 字符 串 'img/otter2 .jpg' 后， 就 可 以 看 到 另 一 只 水 猫 出 
现在 大 图 区 域 了 ( 如 图 6-15 所 示 )。 

src 属 性 对 应 index.html 中 <img> 标 签 的 src 属 性 。 鉴 于 这 个 关系 ， 使 用 dataiLImage 的 
setAttribute 方 法 也 可 以 得 到 同样 的 结果 。 

在 控制 台中 调用 这 个 方法 并 且 传 递 两 个 字符 串 : 属性 名 和 新 的 值 。 


detailImage.setAttribute('src', 'img/otter3.jpg'); 
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OTTERGRAM 











图 6-15 


大 图 又 一 次 改变 了 (如 图 6-16 所 示 )。 


Ooe ， 访 Ottergram 和 


> 


> 


为 大 图 设置 src 属 性 


DETAIL_IMAGE_SELECTOR 
"[data-image-role="target"]" 
document.querySelector(DETAIL_IMAGE_SELECTOR); 


<img class="detail-image" data-image-role="target" src="img/otterl. ipg" 
alt> 


var detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR); 
undefined 
detailImage 


<img class="detail-image" data-image-role="target" src="img/otterl.ipg" 
alt> 


detailImage.src = 
“img/otter2.jpg" 


"img/otter2.jpg"; 





PT 














€ 3 CC [localhost:3000/# 





ee 
OTTERGRAM 








bg = 
[RD  Blements Console Sources Network Timeline Profiles » fe 
© top v OPreservelog 


> 


DETAIL_IMAGE_SELECTOR 
"[data-image-role="target”]" 
document .querySelector (DETAIL_IMAGE_SELECTOR); 
<img class="detail-image" data-image-role="target" src="img/otterl.ipg" 


alt> 
var detaitImage = document.querySelector(DETAIL_IMAGE_SELECTOR); 
undefined 
detailInage 
Fs class="detail-image" data-image-role="target" src="img/otterl.ipg" 
alt> 
detailImage. src = 'img/otter2.jpg'; 
"img/otter2. jpg" 
detailInage. setAttribute('src', ‘img/otter3.jpg'); 
undefined 


图 6-16 使 用 setAttribute 改 变 图 片 
所 有 要 用 来 自动 修改 大 图 的 代码 都 齐全 了 ， 接 下 来 开始 编写 第 一 个 JavaScript 函 数 吧 ! 
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6.7 编写 setDetails 函数 


前 面 我 们 已 经 接触 了 一 些 方法 , 知道 调用 它们 可 以 让 一 段 代码 和 运行。 函数 和 方法 实际 上 就 是 
一 个 可 以 复 用 的 操作 步骤 列表 。 调 用 函数 就 像 是 说 “做 一 个 三 明治 ”"， 而 不 是 说 “ 拿 出 两 片面 包 ， 
在 一 片上 放 上 火腿 、 意 大 利 腊肠 、 干 酷 ， 再 把 另 一 片面 包 放 在 最 上 面 ”。 

本 章 会 为 Ottergram 编 写 7 个 函数 。 第 1 个 函数 要 完成 两 件 事情 :改变 大 图 和 大 图 标题 。 在 main.js 
中 添加 如 下 水 数 声 明 。 


var DETAIL IMAGE SELECTOR = '[data-image-role="target"]'; 
var DETAIL TITLE SELECTOR = '[data-image-role="title"]'; 
var THUMBNAIL LINK SELECTOR = '[data-image-role="trigger"]'; 









































function setDetails() { 
'use strict'; 

i // 放置 要 运行 的 代码 

上 述 代 码 使 用 function 关 键 字 声明 了 一 个 名 为 setDetaitLs 的 函数 。 声 明 函 数 的 时 候 ， 函 数 
名 后 通常 跟着 一 对 圆 括 号 ， 它 们 不 是 函数 名 的 一 部 分 ， 很 快 你 就 知道 它们 有 什么 用 了 。 
圆 括 号 后 面 是 一 对 大 括号 ， 大 括号 内 就 是 函数 体 。 函 数 体 中 包含 了 函数 要 执行 的 操作 ,这些 
操作 更 正式 的 说 法 是 语句 。 
函数 的 第 一 行 是 一 个 字符 串 'use strict';。 在 每 个 函数 的 开始 使 用 这 个 字符 串 是 告诉 浏览 
器 它 符合 JavaScript 最 新 标准 版 的 要 求 。( 本 章 最 后 的 延展 阅读 部 分 有 更 多 关于 严格 模式 的 介绍 。) 

setDetails 函 数 中 的 男 一 行 是 一 条 注释 。 和 CSS 注 释 一 样 , JavaScript 注 释 也 只 是 为 开发 者 提 
供 帮 助 ， 会 被 浏览 器 忽略 。JavaScript 的 注释 可 以 以 // 起 始 写 在 一 行内 ; 对 于 跨越 多 行 的 注释 ， 
可 使 用 /* */ 的 形式 。 这 两 种 形式 在 JavaScript 中 都 是 正确 的 。 

上 一 节 我 们 已 经 在 控制 台中 尝试 过 所 有 改变 大 图 的 语句 了 。 再 打开 控制 台 , 按 上 方向 键 ， 可 
以 看 到 最 近 一 条 在 提示 框 中 输入 过 的 语句 。 通 过 上 、 下 方向 键 可 以 浏览 语句 的 历史 记录 。 

通过 方向 键 ， 找 到 获取 大 图 引用 的 语句 var detailImage = document.querySelector 
(DETAIL IMAGE SELECTOR) ;。 把 这 行 从 控制 台中 复制 到 main.js 中 ， 替换 掉 原 来 的 注释 ， 然后 将 
控制 台中 调用 detaiLImage.setAttribute 方 法 的 代码 detaiLImage.setAttribute('src'， 
'img/otter3.jpg') ;复制 粘贴 过 来 。 

main.js 的 setDetaitLs 函 数 应 当 像 下面 这 样 : 
































































































































function setDetails() { 
"use strict'; 


var detaiLImage = document.querySelector(DETAIL IMAGE SELECTOR); 
detailImage.setAttribute('src', 'img/otter3.jpg'); 
} 


保存 mainjs， 再 回 到 控制 台 。 输 入 下 面 的 代码 再 按 下 回 车 来 执行 setDetaits 函 数 : 


setDetails(); 
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调用 函数 ( 即 在 函数 名 后 面 加 上 一 对 括号 ) 会 执行 函数 体 中 的 代码 。 可 以 看 到 img/otter3.jpg 
现在 展示 为 大 图 了 ( 如 图 6-17 所 示 )。 
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setDetails() OTTERGRAM OF tm v Pe 
> setDetails(); 


undefined 





图 6-17 执行 SetDetails 来 改变 图 片 


setDetails 改 变 了 大 图 ,但 是 没有 改变 大 图 标题 。 我 们 想 它们 都 改变 ， 所 以 当 修 改 大 图 的 


时 候 ， 可 以 添加 一 条 语句 来 获取 元 素 的 引用 并 且 修 改 其 属性 。 
在 main.js 的 setDetails 孔 数 中 ， 再 一 次 调用 document.querySelector,， 并且 向 其 传递 
DETAIL TITLE_SELECTOR 参 数 。 将 结果 赋 给 一 个 名 为 detailTitle 的 新 变量 ,然后 设置 它 的 


textContent 属 性 为 'You Should Be Dancing'。 





function setDetails() { 
"use strict'; 
var detaiLImage = document.querySelector(DETAIL IMAGE SELECTOR); 


detailImage.setAttribute('src', 'img/otter3.jpg'); 


var detailTitle = document.querySelector(DETAIL TITLE SELECTOR); 
detailTitle.textContent = 'You Should Be Dancing'; 


} 
textContent 属 性 指 的 是 一 个 元 素 内 部 的 文本 ( 不 包括 HTML 标 签 )。 


保存 更 改 , 再 次 在 控制 台中 执行 setDetails。 现在 大 图 和 大 图 标题 都 改变 了 ( 如 图 6-18 所 示 )。 
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> setDetails(); 
< undefined 
> 





图 6-18 ”使 用 setDetails 修 改 图 片 和 大 图 标题 


通过 形 参 声明 接受 实 参 
到 行 它 ， 它 都 将 图 片 的 src 设 置 


setDetails 已 经 可 以 用 于 改变 大 图 和 大 图 标题 了 。 然 而 每 次 运行 
为 img/otter3.jpg， 将 标题 的 textContent 设 置 为 'You Should Be Dancing'。 如 果 想 换 成 其 


他 图 片 和 标题 呢 ? 
办 法 就 是 在 调用 setDetails 的 时 候 告 诉 它 要 使 用 的 图 片 和 文字 。 


为 了 达到 这 个 目的 , 需要 让 函数 可 以 接受 实 参 一 一 传递 给 函数 的 值 。 这样 的 话 ， 就 需要 在 函 


数 声 明 的 时 候 列 举 形 参 。 
为 main.js 的 setDetails 添 加 两 个 形 参 : 


function setDetails(imageUrl, titleText) { 
"use strict'; 


var detaiLImage = 
detailImage.setAttribute('src', 


document .querySelector(DETAIL IMAGE SELECTOR); 
'img/otter3.jpg'); 


var detailTitle = document.querySelector(DETAIL TITLE SELECTOR); 
detailTitle.textContent = 'You Should Be Dancing'; 

} 

然后 使 用 这 些 形 参 来 蔡 换 'img/otter3.,jpg' 和 'You Should Be Dancing': 


6.7 编写 setDetails 函数 107 





function setDetails(imageUrl, titleText) { 
"use strict',; 
var detaiLImage = document.querySelector(DETAIL IMAGE SELECTOR); 


detailImage.setAttribute('src', imageUrl); 


var detailTitle = document.querySelector(DETAIL TITLE SELECTOR); 
detailTitte.textContent = ‘You_ Sheuld Be _ Dancing 
detailTitle.textContent = titleText; 


} 

传递 给 setDetails 的 值 被 赋 给 了 两 个 形 参 ， imageUrl 和 titleText。 保 存 main.js， 然 后 在 
控制 台中 试 一 下 能 否 正常 运行 。 

调用 setDetails 并 且 向 其 传递 'img/otter4.jpg' 和 'Night Fever' 这 两 个 值 。( 确保 用 去 
号 分 隔 这 两 个 值 。) 

setDetails('img/otter4.jpg', 'Night Fever'); 


应 该 看 到 新 的 图 片 和 标题 文本 ， 如 图 6-19 所 示 。 
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> setDetails('img/otter4.jpg', 'Night Fever'); 
undefined 
> 





图 6-19 ”给 setDetails 传 值 


形 参 和 实 参 之 间 有 一 个 很 重要 的 区 别 。 形 参 是 函数 的 一 部 分 。 在 JavaScript 中 , 形 参 指 的 是 
明 在 函数 体 中 的 变量 。 实 参 则 是 调用 函数 时 实际 提供 的 值 。 
还 需要 注意 的 是 , 无 论 实 参 使 用 了 什么 变量 名 , 为 了 可 以 在 函数 体 中 使 用 , 它们 的 值 总 是 对 
应 到 形 参 上 。 例如 ,车 使 用 了 两 个 变量 来 保存 图 片 URL 和 标题 文本 ,那么 当 调 用 setDetails 时 ， 
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可 以 将 这 两 个 变量 作为 实 参 传递 


var otterOneImage 
var otterOneTitle 


'img/otterl.jpg'; 
'Stayin\' Alive'; 


setDetails(otterOneImage, otterOneTitle); 


setDetails 接 受 值 ， 再 将 它们 赋值 给 imageUrl 和 tittleText 两 个 形 参 ， 然 后 运行 函数 体 中 
的 代码 。 代 码 中 用 到 imageUrL 和 tittLeText ,将 它们 作为 实 参 传递 给 document .querySelector。 

与 变量 名 类 似 ， 形 参 就 像 值 的 一 个 标签 。 你 可 以 使 用 任何 你 喜欢 的 形 参 名 ,不 过 更 推荐 使 用 
语义 化 的 名 字 ， 这 样 的 代码 可 读 性 更 高 ， 也 更 容易 维护 。 


6.8 ”从 函数 返回 值 


现在 已 经 完成 了 计划 中 的 第 1 项 (更 确切 地 说 是 最 后 1 项 )， 也 在 这 个 过 程 中 学 到 了 一 些 
JavaSeript 技 术 。 继续 进行 任务 清单 中 接 下 来 的 两 项 内 容 : 从 缩 略 图 中 获取 图 片 和 标题 。 想 要 完成 
这 些 任 务 ， 需 要 编写 一 个 新 的 函数 。 
在 main.js 中 添加 一 个 imageFromThumb 的 函数 声明 ， 它 接受 一 个 参数 thumbnai1L 作 为 缩 略 图 
锚 元 素 的 引用 。 它 将 检索 并 返回 data-image-urt 属 性 的 值 。 












































function setDetails(imageUrl, titleText) { 
} 


function imageFromThumb(thumbnail) { 

'use strict'; 

return thumbnail.getAttribute('data-image-url'); 
} 


getAttribute 方 法 与 之 前 在 setDetails 消 数 中 使 用 的 setAttribute 方 法 功能 相反 ， 它 只 
需要 一 个 参数 一 一 属性 名 。 

与 setDetails 不 同 ，imageFromThumb 峭 数 使 用 了 return 关 键 字 。 当 调用 一 个 含有 return 
语句 的 函数 时 ， 它 会 返回 一 个 值 。querySetLector 就 是 这 样 的 函数 。 当 调用 它 的 时 候 ， 它 会 返回 

个 值 ， 你 可 以 将 这 个 值 赋 给 一 个 变量 。 

保存 main.js， 然 后 在 控制 台中 试 一 下 下 面 的 代码 ， 代 码 行 之 间 要 输入 回 车 。 


var firstThumbnail = document.querySelector(THUMBNAIL LINK SELECTOR); 
imageFromThumb (firstThumbnail); 



































控制 台 显 示 返 回 的 值 是 一 个 字符 串 "img/otter1.jpg"， 这 是 因为 imageFromThumb 返 回 了 
缩 略 图 的 data-image-url。 
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> var firstThumbnail = document,.querySelector(THUMBNAIL_LINK_SELECTOR); 
undefined 

> imageFromThumb(firstThumbnail); 
"img/otter1. jpg" 

|| 





图 6-20 ”imageFromThumb 的 返回 值 


需要 注意 的 是 ， 所 有 位 于 return 语 句 之 后 的 语句 都 不 会 执行 ，return 语 句 可 以 有 效 地 停止 
正在 运行 的 函数 。 

接 下 来 要 编写 的 函数 会 接受 一 个 缩 略图 元 素 的 引用 ， 然 后 返回 标题 文本 。 

在 main.js 中 添加 一 个 titleFromThumb 的 函数 声明 ， 其 中 包含 一 个 thumbnail 参 数 。 这 个 函 
数 将 返回 data-image-titte 属 性 的 值 。 








function imageFromThumb (thumbnaitL) { 
} 


function titleFromThumb(thumbnail) { 

'use strict'; 

return thumbnail.getAttribute('data-image-title'); 
} 


保存 main.js 并 且 在 控制 台中 进行 试验 : 


var firstThumbnail = document.querySeLector(THUMBNAIL_LINK_SELECTOR) ; 
titleFromThumb(firstThumbnail); 


[R 0 Elements Console Sources Network Timeline » : XxX 
@@ 本 top vv QPreservelog 


> var firstThumbnail = document.querySelector(THUMBNAIL_LINK_SELECTOR); 
undefined 

> titleFromThumb(firstThumbnail); 
"Stayin' Alive" 

> | 


图 6-21 ” tittleFromThumb 的 返回 值 


接 下 来 要 写 的 函数 是 为 之 前 3 个 函数 服务 的 ， 以 便于 不 用 分 别 调用 它们 。 这 个 函数 接受 一 个 
缩 略 图 元 素 的 引用 ， 然 后 调用 setDetails， 并 日 传递 从 imageFromThumb 和 titleFromThumb 得 
到 的 返回 值 。 

在 main.js 中 添加 setDetailsFromThumb。 
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function titLeFromThumb (thumbnaitL) { 


全 


function setDetaiLsFromThumb (thumbnaiL) { 
"use strict'; 
setDetaiLs(imageFromThumb (thumbnaiL) ，titLeFromThumb (thumbnaitL) ) ; 
} 
请 注意 ， 调 用 setDetails 时 传递 了 两 个 参数 ， 个 参数 都 是 函数 调用 。 这 上 段 代码 执行 的 





过 程 是 怎么 样 的 呢 ? 

在 setDetails 真 正 被 调用 前 ， 它 的 参数 会 先 还 原 为 最 简单 的 值 。 首 先 运行 jmageFromThumb 
(thumbnail) 并 返回 一 个 值 ,接着 运行 titleFromThumb (thumbnail) 并 返回 一 个 值 ,最 后 setDetails 
被 调用 的 时 候 ， 传 递 从 imageFromThumb (thumbnaiL) 和 titLeFromThum(thumbnaitL) 返 回 的 两 个 值 。 
图 6-22 展 示 了 这 个 过 程 。 


代码 的 初始 状态 一 setDetails (imageFromThumb(thumbnail), titleFromThumb(thumbnail)); 


























a 
setDetails( "img/otterl.jpg" er ron un shunbnes 
setDetails( "img/otterl.jpg" ， oe )s 示 的 函数 调用 

















图 6-22 ”将 函数 调用 作为 参数 


保存 main.js, 目前 已 经 完成 了 通过 缩 略 图 检索 数据 属性 值 并 使 用 这 些 值 更 新 大 图 和 标题 的 
代码 。 

结束 了 低层 次 的 操作 之 后 , 接 下 来 要 编写 当 用 户 点 击 缩 略图 时 将 缩 略图 的 信息 传 到 大 图 的 
代码 。 


6.9 添加 事件 监听 器 


浏览 器 是 个 很 忙碌 的 软件 ， 它 会 注意 到 每 一 次 触 碰 、 点 击 、 深 动 以 及 按键 ,这 些 行 为 都 是 浏 
览 器 可 能 要 响应 的 事件 。 为 了 使 网 站 动态 化 并 且 可 交互 , 可 以 在 这 些 事 件 发 生 的 时 候 触 发 某 些 代 
码 。 本 市 将 会 为 每 个 缩 略图 添加 事件 监听 器 。 

事件 监听 咒 是 一 个 对 象 。 正 如 其 名 ， 它 可 以 “监听 ” 某 个 特定 事件 ( 如 鼠标 点 击 )。 当 指定 
事件 发 生 时 ， 事件 监听 器 就 会 触发 一 个 函数 调用 以 响应 事件 。 

( 像 单 击 和 双击 这 样 的 鼠标 事件 ， 还 有 按键 等 键盘 事件 都 是 最 常见 的 事件 类 型 。MDN 上 有 完 
整 的 事件 列表 ， 请 见 developer.mozilla.org/en-US/docs/Web/Events。 ) 

包括 document 在 内 的 每 个 DOM 元 素 都 有 addEventListener 方 法 。 像 之 前 一 样 ， 先 在 控制 
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台中 试验 代码 ， 然 后 将 测试 过 的 代码 作为 函数 写 进 mainjs 中 。 
切换 到 Chrome， 在 控制 台中 输入 如 下 代码 ， 需 要 使 用 Shift + Enter 来 输入 换行 符 。 代 码 输 入 
完毕 后 按 下 回 车 键 。 
document.addEventListener('click', function () { 
console.log('you clicked!'); 
}); 
刚刚 的 代码 为 document 对 象 添 加 了 一 个 监听 当前 页 面 所 有 点 击 事件 的 监听 器 。 当 发 现 点 击 
事件 时 , 事件 监听 器 就 会 使 用 内 置 的 consote.1Log 方 法 在 控制 台中 打印 “you clicked!”( 如 图 6-23 
所 示 )。 





addEventListener('click',...) 
© 90 orn 二 三 
€ 3 CC (localhost3000/# 三 
OTTERGRAM 
[x tI) Eements Console Sources Network 分 ; Xx 





OTFitop Preserve log 


》 document.addEventListener('click', function () { 
console. log('you clicked!'); 
}); 


undefined 
@ you clicked! VM1126:2 


function(){ 


console.log('you clicked!'); 








图 6-23 ”添加 点 击 事件 的 监听 器 


点 击 页 头 、 大 网 或 者 背景 都 可 以 看 到 控制 台中 打印 了 文本 "you clicked!”。( 不 要 点 击 缩 略 网 
那样 会 导致 离开 Ottergram 的 index.html 页 面 。 如 果 不 在 index.html 页 面 上 ,浏览 器 就 不 会 加 载 和 运 
行 你 写 的 所 有 标记 、CSS 和 JavaScript。 ) 

addEventListener 接 受 两 个 参数 : 一 个 表示 事件 名 的 字符 串 和 一 个 函数 。 一 旦 事件 发 生 在 
当前 元 素 上 ，addEventListener 就 会 运行 这 个 函数 。 这 种 编写 函数 的 方式 乍 一 看 有 些 奇怪 ， 它 
叫 匿名 函数 。 

到 现在 为 止 , 我 们 使 用 过 setDetaits 和 titLeFromThumb 这 样 的 命名 函数 。 显 然 , 命名 函数 
有 名 字 (这 不 奇怪 )， 并 且 是 通过 函数 声明 创建 的 。 

你 也 可 以 编写 函数 字面 量 ， 就 像 编写 42 这 样 的 数值 字面 量 和 "Barry the 0tter" 这 样 的 字 
符 串 字 面 量 一 样 。 函 数字 面 量 的 另 一 个 名 字 就 是 匿名 函数 。 

匿名 函数 通常 作为 其 他 函数 的 参数 来 使 用 ， 如 传递 给 document ,addEventListener 的 第 二 
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个 参数 。 将 一 个 函数 传递 给 另 一 个 函数 的 做 法 在 JavaScript 中 十 分 常见 ,并 被 称 为 回调 模式 ， 因 为 
作为 参数 传递 的 这 个 函数 通常 在 未 来 的 某 个 时 间 点 会 被 “调用 回来 ”。 

当然 ,使 用 一 个 命名 函数 作为 回调 函数 也 没 问 题 ， 不 过 多 数 前 端 开发 者 会 选择 匿名 函数 ， 
为 它 比 命名 函数 更 加 灵活 。 我 们 马上 会 介绍 回调 函数 的 原理 。 

现在 ， 要 为 一 个 缩 略 图 添加 事件 监听 器 。 在 控制 台中 输入 如 下 代码 (使 用 Shift + Enter 来 为 
调用 firstThumbnaitL.addEventListener 那 里 添加 换行 符 ): 


var firstThumbnail = document.querySelector(THUMBNAIL LINK SELECTOR); 

firstThumbnail.addEventListener('click', function () { 
console.log('you clicked!'); 

}); 


这 时 试 着 点 击 第 一 个 缩 略 图 (水 猫 Barry， 最 左边 那个 ), 浏览 器 会 打开 水 狠 Barry 的 大 图 。 发 
生 了 什么 ”要 知道 ， 每 个 缩 略 图 都 被 包 庄 在 一 个 锚 标 签 中 ， 而 标签 的 href 属 性 指向 了 图 片 ， 如 
img/otterl.jpg。 用 户 点 击 链接 时 ， 浏 览 器 的 默认 行为 就 是 打开 href 属 性 指向 的 文件 。 

不 过 我 们 并 不 希望 点 击 缩 略 图 时 离开 Ottergram, 因此 不 得 不 对 锚 标 签 再 做 些 改 动 。 好 在 此 时 
可 以 通过 回调 函数 来 解决 这 个 问题 。 

本 章 前 面 曾 提 到 ， 抑 数 执行 任务 时 我 们 不 用 考虑 其 内 部 实现 。 通常 , 我 们 只 需要 知道 传 什么 
参数 ， 以 及 函数 返回 什么 信息 就 行 了 。 当 把 一 个 回调 函数 作为 参数 传递 时 ,就 多 了 一 件 需 要 知道 
的 事情 : 什么 信息 会 被 传递 给 回调 函数 。 

调用 addEventListener 就 是 在 告诉 浏览 器 :“ 当 firstThumbnail 被 点 击 的 时 候 ， 调 用 这 个 
函数 "， 接 下 来 浏览 器 就 会 等 竺 着 这 个 元 素 被 点 击 。 如 果 点 击发 生 了 ， 浏 览 器 就 会 记录 下 事件 的 
所 有 细节 (例如 鼠标 的 准确 位 置 、 左 键 点 击 还 是 右键 点 击 、 单 击 还 是 双击 等 )。 接 着 ,浏览 器 就 
会 把 包含 这 些 信 息 的 一 个 对 象 传递 给 函数 ， 这 个 对 象 叫 作 事 件 对 象 。 

其 中 的 关系 如 图 6-24 所 示 ， 其 中 使 用 了 addEventListener 的 组 合 实现 。 




































































firstThumbnail.addEventListener('click',function(event){ 
// 对 event 参 数 进行 操作 
»; 


传递 给 


function addEventListener(eventName, callback){ 


var theEvent=// 浏览 器 用 来 保存 点 击 事件 信息 的 对 象 
caLLback(theEvent) ; 


} 


图 6-24 ”传递 一 个 需要 参数 的 匿名 函数 
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接 下 来 像 之 前 一 样 癌 addEventListener 传 递 一 个 匿名 函数 ， 不 过 这 次 的 匿名 函数 需要 接受 
一 个 参数 。 确 保 Ottergram 在 index.html 页 面 并 在 控制 台中 输入 : 


var firstThumbnail = document.querySelector(THUMBNAIL LINK SELECTOR); 
firstThumbnail.addEventListener('click', function (event) { 
event.preventDefault(); 
console.log('you clicked!'); 
console. log(event); 
}); 


每 当 firstThumbnaiL 被 点 击 时 ， 浏 览 吉 都 会 调用 这 个 匿名 函数 ， 并 且 将 事件 对 象 传递 给 
名 函数 。 通 过 这 个 对 象 ( 即 event )， 可 以 调用 它 的 preventDefautLt 方 法 ， 这 个 方法 可 以 阻止 链 
接 让 浏览 器 跳 到 另 一 个 页 面 。 最 后 ， 调 用 consotLe ,Log 并 传人 event 对 象 ， 以 便 在 开发 者 工具 中 
看 看 它 到 底 包 含 哪些 信息 。 

现在 点 击 第 一 个 缩 略 图 ， 浏 览 器 会 停 在 Ottereram 页 面 ， 而 事件 被 记录 到 了 控制 台中 : 
MouseEvent {isTrusted: true}j。 点 击 MouseEvent 旁 边 的 详情 箭头 可 以 看 到 事件 的 更 多 信息 
( 如 图 6-25 所 示 )， 比 如 鼠标 在 页 面 上 的 坐标 ， 哪 个 鼠标 按键 被 点 击 ， 以 及 是 否 有 任何 特殊 按键 在 
点 击 期 间 被 按 下 。 
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>》 var firstThumbnail = document.querySelector(THUMBNAIL_LINK_SELECTOR); 
undefined 
》 firstThumbnail.addEventListener('click', function (event) { 
event.preventDefault(); 
console. log('you clicked!'); 
console. log(event); 





; 
undefined 
you clicked! VM1413:3 
VM1413:4 
wouseEvent {isTrusted: true, screenX: 496, screenY: 1191, clientX: 49, 
clientY: 447-) 加 
altKey: false 
bubbles: true 
button: 0 
buttons: 0 
cancelBubble: false 
cancelable: true 
clientX: 49 
clientY: 447 
ctrLKey: false 
currentTarget: null 
defaultPrevented: true 


图 6-25 ”阻止 默认 事件 并 且 打 印 事件 对 象 


现在 不 必 关注 事 件 对 象 中 的 各 种 属性 ， 只 需要 清楚 它 包 含 了 许多 有 关 已 触发 事件 的 信息 即 可 。 

另外 ， 回 调 函 数 的 参数 命名 不 一 定 是 event。 无 论 叫 什么 名 字 ， 它 都 会 自动 与 传递 的 值 进 行 
匹配 。 因 此 可 以 使 用 任何 你 喜欢 的 名 字 ,但 最 好 的 做 法 是 使 用 描述 性 的 名 字 ( 就 像 之 前 做 的 那样 )， 
以 提高 代码 的 可 读 性 和 可 维护 性 。 
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现在 已 经 有 一 个 接受 缩 略图 并 为 其 添加 事件 监听 器 的 函数 了 。 接 下 来 在 main.js 中 添加 
addThumbClickHandler 的 函数 声明 ， 它 应 当 定 义 一 个 名 为 thumb 的 参数 。 

可 以 把 控制 台中 试验 过 的 addEventListener 代 码 复 制 到 addThumbClickHandler 函 数 体 
中 。 为 了 调用 thumb .addEventListener， 需 要 对 其 做 些 修改 。 但 现在 ， 只 需 在 回调 函数 中 调用 
event .preventDefautLt 即 可 。 


























function setDetaiLsFromThumb (thumbnaiL) { 


a 


function addThumbClickHandler(thumb) { 
'use strict'; 
thumb.addEventListener('click', function (event) { 
event .preventDefault(); 
}); 
} 


回调 函数 作为 addThumbCLickHandtLer 的 一 部 分 ， 可 以 访问 已 声明 的 参数 thumb ， 并 且 把 它 
传递 给 setDetailsFromThumb 的 调用 











O 


function addThumbClickHandler(thumb) { 
"use strict'; 
thumb.addEventListener('click', function (event) { 
event.preventDefault(); 
setDetailsFromThumb (thumb); 

: }); 

和 其 他 编程 语言 一 样 ，JavaScript 同 样 也 有 定义 及 访问 变量 和 函数 的 规则 。 被 传递 给 
addEventListener 的 匿名 函数 可 以 访问 setDetaiLsFromThumb 是 因为 setDetaiLsFromThumb 声 
明 在 全 局 作用 域 中 ， 这 意味 着 它 可 以 被 任何 函数 以 及 控制 台 访 问 。DETAIL_ IMAGE _ SELECTOR 等 
变量 也 是 如 此 ， 它 同样 声明 在 全 局 作用 域 中 。 

然而 , 在 setDetaitLs 中 声明 的 变量 detaiLImage 和 detaiLTitLe 只 能 在 setDetaitLs 函 数 体 
中 被 访问 ， 无 法 通过 控制 台 或 者 其 他 函数 来 访问 ， 因 为 这 些 变量 被 定义 在 了 setDetaitLs 的 函数 
作用 域 (也 被 称 为 局 部 作用 域 ) 中 。 一 个 函数 的 参数 的 行为 与 声明 在 函数 中 的 变量 非常 相似 , 它 
们 也 是 该 函数 作用 域 中 的 一 部 分 。 

正常 来 讲 ， 函 数 是 不 能 访问 其 他 函数 作用 域 中 的 变量 和 参数 的 。 但 addThumbCLickHandLer 
函数 定义 了 一 个 可 以 被 其 他 函数 (也 就 是 传递 给 addEventListener 函 数 的 回调 函数 ) 访问 的 
thumb 参 数 。 因 为 该 回调 函数 位 于 addThumbClickHandler 函 数 的 作用 域 中 ， 所 以 这 一 切 才 可 能 
发 生 。 

本 章 最 后 的 “延展 阅读 ”有 关于 这 一 过 程 的 更 多 内 容 。 
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6.10 ”访问 所 有 缩 略 图 


我 们 已 经 在 控制 台中 为 第 一 张 缩 略图 添加 了 事件 监听 器 。 现 在 ,为 给 所 有 缩 略 图 添加 事件 监 
听 器 ， 使 用 一 个 新 的 DOM 方 法 。 

在 检索 大 图 和 大 图 标题 时 ， 可 以 使 用 document ,querySetLector 方 法 在 DOM 中 搜索 与 传人 
的 选择 器 相 匹配 的 元 素 。document .querySelector 只 返回 一 个 值 ， 即 使 传人 的 选择 器 可 以 匹配 
多 个 元 素 ， 它 也 只 返回 一 个 值 。 

而 document.querySelectorAll 方 法 将 返回 所 有 匹配 的 元 素 。 在 控制 台中 调用 
document .querySetLectorALL(THUMBNAIL_LINK_SELECTOR) , 将 可 以 看 到 一 个 包含 锚 元 素 的 列 
表 (如 图 6-26 所 示 )。 
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> document.querySelectorAll(THUMBNAIL_LINK_SELECTOR); 


Eb 
p<a href="img/otterl.jpg" data-image-role="trigger" data-image-title= 
"Stayin' Alive" data-image-url="img/otterl.jpg">..</a> 


p<a href="img/otter2.jpg" data-image-role="trigger" data-image-title="How 
Deep Is Your Love" data-image-url="img/otter2.jpg">..</a> 


’ 
p<a href="img/otter3.jpg" data-image-role="trigger" data-image-title="You 
Should Be Dancing" data-image-url="img/otter3.jpg">..</a> 


， 
<a href="img/otter4.jpg" data-image-role="trigger" data-image-title= 
"Night Fever" data-image-url="img/otter4.jpg">..</a> 


’ 
p<a href="img/otter5.jpg" data-image-role="trigger" data-image-title="To 
Love Somebody" data-image-url="img/otter5.jpg">..</a> 


图 6-26 ”document.querySelectorAll 返 回 多 个 相 匹 配 的 结果 


知道 了 这 些 之 后 ， 就 可 以 更 好 地 测试 setDetaiLsFromThumb 函 数 了 。 在 控制 台中 ， 将 调用 
document .querySetectorALL(THUMBNAIL_LINK_SELECTOR) 的 结果 赋值 给 一 个 名 为 
thumbnails 的 变量 。 使 用 方 括 号 来 检索 thumbnails 列 表 中 的 第 5 个 元 素 ， 并 将 其 传人 
setDetaiLsFromThumb 函 数 中 。 方 括号 中 的 数值 可 以 作为 下 标 来 指定 一 个 元 素 ， 下 标 从 0 开 
台 ， 因 此 第 5 项 下 标 为 4。 

在 控制 台中 输入 如 下 代码 : 


var thumbnails = document.querySelectorAll(THUMBNAIL LINK SELECTOR); 
setDetailsFromThumb (thumbnails[4]); 


在 控制 台中 执行 上 述 代 码 后 ， thumbnails 列 表 中 的 一 项 便 传 给 了 setDetailsFromThumb 
因数 ， 并 成 功 改变 了 大 图 和 标题 ( 如 图 6-27 所 示 )。 
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var thumbnails = document.querySeLectorALL(THUMBNAIL_LINK_SELECTOR) ; 


oTTERGRAM 





undefined 
setDetailsFromThumb(thumbnails [4] ); 
undefined 


图 6-27 从 querySelectorAl1l 向 setDetailsFromThumb 传 人 一 项 


在 main.js 中 添加 一 个 名 为 getThumbnaitLsArray 的 函数 ， 并 把 检索 匹配 THUMBNAIL_LINK_ 
SELECTOR 元 素 的 结果 和 赋值 给 thumbnaitLs 变 量 的 代码 粘贴 进去 。 





function addThumbClickHandler(thumb) { 


} 


function getThumbnailsArray() { 
'use strict'; 


var thumbnails = document.querySelectorAll (THUMBNAIL LINK SELECTOR); 
} 
在 使 用 DOM 方 法 时 还 要 注意 一 个 问题 ,刚刚 的 DOM 方 法 返回 的 是 一 个 元 素 列表 而 不 是 数组 ， 
具体 来 说 , 返回 的 是 一 个 节点 列表 。 数 组 和 节点 列表 都 是 一 些 项 的 列表 , 不 同 的 是 数组 拥有 一 系 
列 功 能 强大 的 方法 用 于 处 理 这 些 集合 ， 而 在 Ottergram 中 同样 需要 使 用 其 中 的 某 些 方法 。 
因此 ， 有 必要 通过 一 种 方式 将 querySelectorAll 返 回 的 节点 列表 转换 为 一 个 数组 ， 虽 然 这 
种 方式 看 起 来 有 些 奇 怪 。 这 种 语法 可 以 暂且 不 深究 , 这 是 一 种 将 节点 列表 转换 为 数组 的 向 后 兼容 


的 方式 。 在 main.js 中 进行 如 下 修改 : 














function getThumbnailsArray() { 


"use strict'; 
var thumbnails = document.querySelectorAll (THUMBNAIL LINK SELECTOR); 


var thumbnailArray = [].slice.call(thumbnails); 
return thumbnailArray; 
} 
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现在 已 经 获取 到 所 有 的 水 猎 缩 略图 了 。 试 着 将 它们 与 之 前 的 事件 监听 代码 关联 起 来 , 让 大 图 
和 标题 响应 点 击 ， 进 行 改 变 。 


6.11 迭代 缩 略图 数组 


将 缩 略 图 与 事件 处 理 代码 关联 起 来 是 项 简单 的 工作 , 只 要 编写 一 个 作为 整个 Ottergram 项 目 逻 
辑 起 点 的 函数 就 好 了 。 其 他 编程 语言 有 内 置 的 启动 应 用 的 机 制 , 而 JavaScript 没 有 。 但 是 不 用 担心 ， 
这 实现 起 来 也 很 容易 。 

先 在 main.js 结 尾 添 加 一 个 名 为 jnitializeEvents 的 函数 ， 该 方法 会 把 所 有 步骤 联系 起 来 ， 
从 而 使 Ottergram 具 有 交互 性 。 它 首先 会 获取 缩 略 图 数组 , 然后 遍历 整个 数组 , 给 其 中 每 个 元 素 添 
加 点 击 事件 处 理 程序 。 写 完 这 个 函数 后 ， 需 要 在 main.js 的 最 后 添加 一 条 调用 initiaLizeEvents 
函数 的 语句 来 执行 它 。 

在 新 函数 的 函数 体 中 添加 一 条 调用 getThumbnaiLsArray 函 数 的 语句 并 将 结果 ( 缩 略 图 数 
组 ) 赋 给 一 个 名 为 thumbnails 的 变量 。 





























function getThumbnailsArray() { 


} 


function initializeEvents() { 
'use strict'; 
var thumbnails = getThumbnailsArray(); 


} 

接 下 来 ， 需 要 一 项 一 项 地 检查 整个 缩 略 图 数组 。 当 访问 每 个 数组 元 素 时 ， 调 用 
addThumbClickHandler 函 数 并 将 缩 略 图 元 素 传 给 它 。 这 看 起 来 需要 很 多 步骤 才能 完成 ,不 过 因 
为 thumbnails 是 一 个 数组 ， 因 此 可 以 通过 一 个 简单 的 方法 调用 来 完成 上 述 所 有 操作 。 

在 main.js 中 加 入 调用 thumbnails .forEach 了 水 数 的 语句 ， 并 将 addThumbClickHandler 作 为 
回调 函数 传 进去 。 








function initializeEvents() { 
"use strict'; 
var thumbnails = getThumbnailsArray(); 
thumbnails.forEach(addThumbClickHandler); 
} 


请 注意 , 上 面 的 代码 中 传递 了 一 个 命名 函数 作为 回调 。 后 面 将 会 提 到 , 这 不 总 是 一 个 好 办 法 。 
不 过 在 目前 这 个 例子 中 这 样 做 并 不 会 引发 错误 ， 因 为 addThumbCLickHandtLer 函 数 只 需要 在 
forEach 函 数 调用 它 时 传递 给 它 的 信息 ， 即 thumbnaitLs 数 组 中 的 一 个 元 素 。 

最 后 ， 在 main.js 的 末尾 处 添加 调用 initiaLizeEvents 函 数 的 语句 来 触发 上 述 所 有 操作 。 














function initiaLizeEvents() { 
"use strict'; 
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var thumbnails = getThumbnailsArray(); 
thumbnails.forEach(addThumbClickHandler); 
} 
initializeEvents(); 
记 住 , 浏览 器 会 一 边 逐 行 读 入 JavaScript 代 码 , 一 边 按 序 执行 它们 。 对 于 main.js 中 的 大 部 分 代 
码 而 言 ， 浏 览 器 仅 执行 变量 和 函数 的 声明 ， 而 当 其 读 到 最 底 端 的 initiatizeEvents(); 时 ， 它 
将 执行 该 函数 。 
保存 修改 并 返回 到 浏览 器 中 , 单 击 几 张 不 同 的 缩 略 图 来 欣赏 一 下 刚刚 的 劳动 成 果 ( 如 图 6-28 
所 示 )。 
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图 6-28 ”你 真 的 可 以 跳 个 舞 了 


坐 下 来 ， 点 点 水 猫 玩 一 殉 。 稍 事 休息 ， 下 面 还 有 很 多 构建 网 站 交互 层 的 工作 和 知识 等 着 你 。 
下 一 章 将 通过 添加 额外 的 视觉 效果 来 结束 Ottergram 项 目 。 


6.12 ”中 级 挑战 : 劫持 链接 
Chrome 开 发 者 工具 为 实现 当前 访问 的 页 面 提 供 了 很 多 帮助 。 接 下 来 的 这 个 挑战 便 是 更 改 搜 
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索 结 果 页 上 的 所 有 链接 来 使 得 它们 无 法 跳 转 到 其 他 地 方 去 。 
访问 最 喜欢 的 搜索 引 警 并 搜索 “otters”， 打 开 开发 者 工具 并 切换 到 控制 台 ， 参 考 Ottergram 中 
所 写 的 函数 ， 为 所 有 链接 添加 一 个 事件 监听 咒 并 禁用 它们 响应 单 击 事件 的 默认 行为 。 


6.13 ”高 级 挑战 : 随机 的 水 猎 


编写 一 个 函数 ， 随 机 修改 水 猎 缩 略图 的 data-image-urL， 使 得 大 图 无 法 与 缩 略图 相 匹 配 。 
使 用 你 自己 选择 的 图 片 的 URL ( 去 搜索 引擎 上 搜索 “tacocat” 应 该 能 找到 不 错 的 结果 )。 

附加 挑战 : 编写 一 个 函数 ， 将 水 猎 缩 略 岁 的 UREL 重 设 为 最 初 的 data-image-urtL 值 ， 然 后 再 
随机 修改 其 中 一 个 。 


6.14 延展 阅读 : 严格 模式 


什么 是 严格 模式 ? 它 为 何 出 现 ? 严格 模式 最 初 作为 JavaScript 的 一 个 更 清洁 的 模式 被 创造 出 
来 ,用 以 捕 提 一 些 特定 的 代码 错误 〈 比如 变量 名 输入 错误 )， 使 开发 者 尽 可 能 避免 该 语言 中 最 易 
出 错 的 部 分 ， 并 且 禁 用 了 部 分 语言 中 通常 并 不 好 的 特性 。 

严格 模式 有 很 多 有 优点 。 
D 强制 使 用 var 关 键 字 。 
口 不 需要 with 语句 。 
口 在 使 用 evat 函 数 时 加 入 了 许多 限制 。 
口 将 函数 的 参数 中 出 现 重复 名 称 的 情况 判定 为 语法 错误 。 

要 实现 所 有 这 些 特性 ， 仅 需要 在 函数 的 前 面 加 上 'use strict' 即 可 。 这 个 命令 的 男 一 个 好 
处 是 可 被 不 支持 该 功能 的 旧式 浏览 器 忽略 ( 它们 仅 将 该 命令 看 作 字 符 串 )。 

在 MDN 上 ( developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_ mode ) 可 以 阅读 
更 多 关于 严格 模式 的 内 容 。 


6.15 ”延展 阅读 : 闭 包 


前 文 曾 经 提 到 过 ， 比 起 命名 函数 ， 开 发 者 通常 更 愿意 使 用 匿名 函数 作为 回调 函数 ， 
addThumbCLickHandtLer 也 说 明了 为 何 匿名 函数 是 一 个 更 好 的 选择 。 

假设 现在 将 一 个 叫 作 cLickFunction 的 命名 函数 作为 回调 函数 。 在 这 个 函数 中 需要 访问 
event 对 象 ， 因 为 它 会 被 传人 addEventListener 函 数 中 ,但 是 clickFunction 的 函数 体 无 法 访 
问 thumb 对 象 ， 该 参数 仅 能 在 addThumbClickHandler 函 数 中 被 访问 .: 


function clickFunction (event) { 
event.preventDefault(); 























































































































setDetailsFromThumb(thumb); // <--- 这 行 代码 会 导致 报错 
} 
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function addThumbClickHandler(thumb) { 
thumb.addEventListener('click', clickFunction); 
} 


但 使 用 匿名 函数 便 可 以 使 其 访问 thumb 参 数 ， 因 为 它 也 在 addThumbClickHandtler 的 函数 体 
内 。 当 一 个 函数 定义 在 另 一 个 函数 内 时 , 前 者 可 以 使 用 后 者 所 有 的 参数 和 变量 。 在 计算 机 科学 中 ， 
这 种 情况 被 称 为 闭 包 。 

当 addThumbCLickHandtLer 函 数 被 执行 时 ， 它 调用 addEventListener， 后 者 将 单 击 事件 与 
回调 函数 关联 起 来 ， 在 内 部 为 回调 函数 维护 了 一 个 引用 并 且 在 事件 发 生 时 执行 回调 函数 。 

从 技术 上 来 讲 ， 当 回调 函数 最 终 执行 时 ，addThumbCLickHandtLer 函 数 的 变量 和 参数 将 不 再 
存在 ， 它 们 在 addThumbClickHandler 函 数 结束 后 便 消 失 了 。 然 而 ,回调 函数 “捕获 ”了 
addThumbClickHandtler 中 的 变量 和 参数 的 值 ， 并 使 用 捕获 的 值 来 执行 语句 。 

如 果 想 深入 了 解 闭 包 ， 可 以 在 MDN 中 阅读 相关 内 容 。 































































































6.16 ”延展 阅读 : NodeList 对 象 和 HTMLCoLLection 对 象 


有 两 种 检索 DOM 中 元 素 的 方法 : 第 一 种 是 使 用 document .querySetLectorALL， 它 返回 一 个 
NodeList 对象; 另外 一 种 方法 是 使 用 document ,getELementsByTagName ， 它 返回 一 个 
HTMLCoLLection 对 象 。 后 者 与 前 者 的 区 别 在 于 你 只 能 将 标签 名 作为 字符 串 传 人 它 ， 比 如 "div" 
或 者 "a"。 

NodeList 和 HTMLCoLLection 对 象 都 不 是 真正 的 数组 ， 它 们 缺少 数组 的 一 些 方法 ， 比 如 
forEach， 不 过 它们 具有 一 些 很 有 意思 的 属性 。 

HTMLCoLLection 对 象 是 动态 的 结 点 ， 这 意味 着 在 修改 DOM 时 ， 不 用 再 次 调用 document 
getELementsByTagName，HTMLCoLLection 的 内 容 会 自动 变化 。 

可 以 在 控制 台中 输入 下 面 的 语句 来 观察 上 述 性 质 和 行为 。 

var thumbnails = document.getElementsByTagName("a"); 

thumbnails.length; 


获取 了 HTMLCoLLection 中 所 有 的 锚 元 素 后 ， 在 控制 台中 输出 结果 列表 的 Length。 
现在 通过 开发 者 工具 中 的 Elements 面 板 来 删除 页 面 中 的 一 些 锚 标签 : 按 住 Control 键 ， 右 击 列 
表 项 ， 并 在 弹出 菜单 中 选择 Delete element ( 如 图 6-29 所 示 )。 
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图 6-29 ”使 用 开发 者 工具 删除 一 个 DOM 元 素 


多 删 几 个 ， 然 后 在 控制 台中 再 次 键入 thumbnails .Length， 可 以 看 到 长 度 发 生 了 变化 (如 
图 6-30 所 示 )。 








<LI Class= TInumDnalL-ITem- ></ L1> 

<Li class="thumbnail-item"></li> == $0 
P<li class="thumbnail-item">..</li> 
p<li class="thumbnail-item">..</li> 
p<li class="thumbnail-item">..</1li> 
p<li class="thumbnail-item">..</li> 
p<li class="thumbnail-item">..</1i> 
p<li class="thumbnail-item">..</1li> 
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图 6-30 ”删除 元 素 后 长 度 值 发 生 了 改变 


将 NodeList 和 HTMLCoLLection 对 象 转换 成 数组 不 仅 可 以 通过 数组 的 方法 更 方便 地 操作 它 
们 ， 而 且 还 可 以 保证 即便 修改 DOM， 数 组 中 的 值 也 不 会 发 生变 化 。 
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6.17 ”延展 阅读 JavaScript 类 型 





























本 章 通过 创建 变量 在 函数 内 引用 了 一 些 数据 。 之 前 曾经 说 过 字符 串 、 数 值 和 布尔 值 是 五 种 基 
本 数据 类 型 中 的 三 种 ， 而 另外 两 种 则 是 空 类 型 ( nuLL ) 和 未 定义 类 型 (undefined )。 
表 6-2 总 结 了 这 五 种 基本 类 型 的 性 质 。 





表 6-2 JavaScript 中 的 五 种 基本 数据 类 型 





























类 型 例 子 描 述 
字符 串 "And you get $100! And 对 引号 括 起 来 的 字母 、 数 字 以 及 符号 
you get $100! And...! " 
数值 42、3.14159、-1 所 有 的 整数 及 小 数 
布尔 值 true、 false 关键 字 为 true 和 fatse， 分 别 代表 逻辑 真 和 逻辑 假 
空 null 该 值 表示 非法 值 
未 定义 undefined 


表示 具有 该 值 的 对 象 并 未 被 赋值 


JavaScript 中 的 其 他 数据 类 型 均 被 认为 是 复合 类 型 或 复杂 类 型 , 其 中 包括 数组 和 对 象 , 它们 内 
部 都 可 以 包含 其 他 类 型 。 比 如 编写 一 个 函数 , 使 其 产生 一 个 缩 略 图 对 象 的 数组 , 数组 也 具有 一 些 


勇 性 (比如 Length ) 和 方法 (比如 forEach )。 
本 书 还 将 继续 介绍 基本 数据 类 型 和 复合 数据 类 型 
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在 上 一 章 中 ，Ottergram 已 经 可 以 响应 用 户 单 击 缩 略图 的 事件 ， 从 而 改变 大 图 了 。 本 章 将 继续 
在 Ottergram 上 增加 不 同 的 视觉 效果 。 

第 一 个 效果 是 简单 的 布局 变化 : 隐藏 大 图 , 并 使 缩 略 图 与 页 面 同 宽 。 当 用 户 单 击 一 张 缩 略图 
时 ， 大 图 重新 出 现 ， 缩 略图 变 回 原来 的 尺寸。 

其 他 两 个 效果 则 是 使 用 CSS 为 缩 略 图 和 大 图 创建 动画 效果 ( 如 图 7-1 所 示 )。 





OO Donsonn x VE 





BO@ /Bown * 
所 他 CG Diocalhost3000 


i 安 三 € 了 C Dlocahost3000 











图 7-1 ”Ottergram 中 的 过 渡 效 果 


7.1 隐藏 及 显示 大 图 


Ottergram 的 用 户 可 能 和 希望 在 滚动 缩 略 图 的 时 候 ， 不 在 页 面 上 显示 大 图 ( 如 图 7-2 所 示 )。 

为 了 达到 这 样 的 效果 ， 需 要 根据 网 站 中 的 某 个 条 件 是 否 成 立 ， 为 .thumbnail-list 
和 .detial-image-container 应 用 样式 。 一 种 方法 是 创建 新 的 类 选择 器 ， 比 如 .thumbnai1- 
list-no-detail 和 .hidden-detail-image-container, 并 且 用 JavaScript 把 这 两 个 类 添加 到 目 
标 元 素 上 去 。 这 个 方法 的 问题 是 效率 不 高 。 

引起 隐藏 大 图 的 事件 也 要 同时 引起 缩 略 图 列表 重新 调整 自己 的 位 置 。 这 里 只 有 一 个 事件 , 但 
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分 别 向 <uL> 和 <div> 元 素 中 添加 类 无 法 体现 这 一 点 。 


OO (oreoemn > VE | 3 om > 全 
€ 全 CGO Dlocalhost:3000/# 家 三 € GC 0 localhost:3000/# 








OTTERGRAM OTTERGRAM 





图 7-2 大 图 的 显示 与 隐藏 


更 好 的 方法 是 只 使 用 JavaScript 添 加 一 个 类 选择 器 ,并 使 其 影响 整个 布局 。 然后 , 就 可 以 通过 
这 个 新 选择 器 定位 作为 后 代 的 ,thumbnail-list 和 ,detail-image-container。 

为 此 ， 要 动态 地 向 <body> 元 素 添 加 类 名 ， 以 隐藏 大 图 并 放大 缩 略 图 ， 然 后 再 动态 地 删除 该 
类 名 以 返回 原来 的 状态 ( 如 图 7-3 扬 : )。 











在 这 里 修改 类 名 …… "| <body> 

















.main-content 








Ee 























导致 这 里 的 样式 发 生变 化 一 .thumbnail-1list .detail-image-container 
.thumbnait-itenm| .detail-image-frame 

















.thumbnail-item 本 | 


图 7-3 ” 当 祖 先 的 类 发 生变 化 时 派生 改变 样式 
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这 种 技术 与 使 用 媒体 查询 有 两 点 类 似 之 处 。 
第 一 ， 都 涉及 在 祖先 符合 特定 条 件 的 情况 下 激活 某 些 样式 。 在 媒体 查询 中 , 祖先 即 视 口 ， 而 
条 件 可 能 是 最 小 宽度 ; 在 这 里 , 祖先 由 任何 你 选择 的 目标 元 素 共 享 ， 而 条 件 为 祖先 有 某 个 特殊 的 





















































类 名 0 

第 二 , 条 件 样式 必须 放 在 受 影响 元 素 的 其 他 声明 之 后 ,因为 条 件 样式 需要 在 它们 生效 时 覆盖 
之 前 的 声明 。 

你 将 通过 3 步 完 成 。 








(1) 在 CSS 中 定义 想 要 达到 的 效果 的 样式 ， 同 时 在 开发 者 工具 中 测试 这 些 样式 。 
(2) 编写 JavaScript 函 数 来 添加 和 删除 <body> 元 素 中 的 类 名 。 
(3) 添加 事件 监听 需 来 触发 写 好 的 JavaScript 函 数 。 


7.1.1 创建 隐藏 大 图 的 样式 


为 了 隐藏 .detaiL-image-container， 可 以 通过 添加 一 条 声明 来 将 元 素 设 为 dispLay: 
none。display: none 可 告诉 浏览 器 该 元 素 不 应 被 演 染 。 

将 被 动态 加 入 <body> 的 类 名 为 hidden-detail。 因 此 ， 仪 当 .detail-image-container 
为 .hidden-detail 的 后 代 时 才 需 要 应 用 display: none。 

在 styles.css 中 加 入 隐藏 大 图 的 样式 : 





















































.detail-image-title { 
} 


.hidden-detail .detail-image-container { 
display: none; 


Gmedia all and (min-width: 768px) { 


se 
现在 来 想 想 .thumbnail-1list 应 该 变 成 什么 样子 。 基 于 当前 的 样式 , 它 会 在 宽屏 幕 上 靠 左 排 
成 一 列 , 在 窜 屏 幕 上 在 顶部 排 为 一 行 。 而 当 大 图 被 隐藏 时 ,无论 屏幕 是 大 是 小 ,还 是 让 列 居中 更 
好 些 。 
当 .thumbnail-list 和 .thumbnail-item 是 .hidden-detail 的 后 代 时 ， 在 style.css 中 为 它 
们 添加 如 下 样式 : 






































.hidden-detail .detail-image-container { 
display: none; 


.hidden-detail .thumbnail-list { 
flex-direction: column; 
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align-items: center; 


} 


.hidden-detail .thumbnail-item { 
max-width: 80%; 
} 


Gmedia all and (min-width: 768px) { 


ge 


现在 ，thumbnail-1list 在 .detail-image-container 被 隐藏 时 将 会 显示 成 一 列 。 

同时 ， 在 大 图 被 隐藏 时 ， 我 们 还 给 .thumbnail-item 元 素 加 入 了 max-width: 80% 来 设置 宽 
度 , 这 条 声明 会 覆盖 其 他 地 方 对 于 .thumbnaitL-item 关 于 max-width 的 设置 , 这 样 一 来 它们 便 会 
成 为 页 面 的 焦点 。 

当 ,detail-image-container、.thumbnail-1list 和 ,thumbnail-item 元 素 成 为 hidden-detail 
类 的 后 代 时 ， 这 些 新 添加 的 样式 将 会 被 激活 。 

注意 ， 这 些 要 添加 在 媒体 查询 之 前 。 如 前 所 述 ，CSS 的 顺序 很 重要 ,文件 中 出 现 位 置 靠 后 的 
样式 会 覆盖 之 前 的 样式 。 通 常 对 于 同一 个 选择 器 而 言 , 浏览 器 会 选择 它 看 到 的 最 近 的 样式 。 但 这 
里 新 样式 使 用 的 选择 器 比 在 媒体 查询 中 出 现 的 选择 器 更 明确 ， 而 “明确 ” 优 于 “最 近 ”。 

总 之 , 最 好 让 媒体 查询 出 现在 文件 末尾 ， 因 为 媒体 查询 总 会 重用 已 存在 样式 的 选择 器 ， 所 以 
把 它们 放 在 末尾 可 以 确保 媒体 查询 能 覆盖 已 有 样式 。 同 时 ， 这 也 更 方便 查找 媒体 查询 ， 因 为 它们 
总 出 现在 文件 末尾 。 

保存 文件 ,但 在 开始 写 应 用 现 有 样式 的 JavaScript 之 前 ,最 好 先 测 斌 一 下 当前 的 样式 是 否 正确 。 
启动 browser-sync ( 使 用 browser-sync start --server - -browser "Google Chrome" --files 
"*.html, stylesheets/*.css, scripts/*.js" )， 同 时 打开 开发 者 工具 。 在 Elements 面 板 中 ， 
按 Control 键 并 右 击 <body> 元 素 ， 在 弹出 菜单 中 选择 Add Attribute ( 如 图 7-4 所 示 )。 


























[R D0) | Eements Console » :Xx 


<html> 
Pp <head>..</head> 
Add Attribute te 
P<sl Edit as HTML Ivascript id= 
b ipt> 
Copy Pp 


<Ss| 


sy 
p<h coloment leader">..</header> 


Jrowser-sync/browser— 
i"></script> 





pe 区 Delete element 
Styles EG Breakpoints Properties 
:hover 
:hov | :focus 
:visited 
element 
Scroll into View 
body { ;Break on... p 
dispoemee 
flex-direction: | 
column: 





图 7-4 ”选择 Add Attribute 菜 单项 
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开发 者 工具 提供 了 可 以 编辑 <zbody> 标 签 的 地 方 , 输入 class="hidden-detail" 并 按 下 回 车 
( 如 图 7-5 所 示 )。 









[R DD] Eements Console » Es 
<html> 

P <head>..</head> 

Ww<body| class="hidden-detail"EB == $0 


P<script typ Javascript" id= 
Douoeript Mrmrnipty 
<script async src="/browser-sync/browser— 
Sync-CLient.2.11.1.js"></Script> 
P<header class="main-header">..</header> 
htm| EE 








图 7-5 ”添加 hidden-detail 类 属性 


在 开发 者 工具 中 为 <body> 添 加 hidden-detail 类 后 ， 大 图 消失 ， 缩 略图 的 尺寸 变 得 大 多 
了 一 一 一 切 正如 所 愿 ( 如 图 7-6 所 示 )。 


©O@ (moram 






















二 [| 
€ 3 CC 口 Ilocalhost3000 = 
中 Elements Console Sources Network Timeline 为 ; x 
OTTERGRAM ocr 
> >-</head> 


xt/javascript" id="_bs_script_">.</Script> 
<script async src="/browser-sync/browser-sync— 


cLient.2.11.1.js"></script> 

P<header class="main-header">..</header> 

P<main class="main-content">..</main> 7 
<script src="scripts/main,.is" charset="utf-8"></script> 

</body> 


</html> 





html eh A 


Styles Event Listeners DOM Breakpoints Properties 








Fitter :hov 得 .cls 十 ， 
element. style { 
} 


body { styles. css:27 
display: flex; 

flex-direction: column; 

font-size: 62.5%; 


图 7-6 ”应 用 hidden-detail 类 后 的 布局 变化 





7.1.2 ”用 JavaScript 隐 藏 大 图 


接 下 来 编写 JavaScript， 切 换 <body> 元 素 中 的 ,hidden-detail 类 。 
在 main.js 中 添加 一 个 名 为 HIDDEN_DETAIL CLASS 的 变量 。 

var DETAIL IMAGE SELECTOR '[data-image-role="target"]'; 

var DETAIL TITLE SELECTOR = '[data-image-role="title"]'; 


var THUMBNAIL LINK SELECTOR = '[data-image-role="trigger"]'; 
var HIDDEN DETAIL CLASS = 'hidden-detail'; 
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现在 ， 在 main.js 中 编写 一 个 名 为 hideDetails 的 函数 ， 其 作用 是 将 一 个 类 名 加 入 到 <body> 
元 素 中 。 使 用 DOM 的 classList .add 方 法 来 操作 类 名 。 





function getThumbnailsArray() { 
} 
function hideDetails() { 

'use strict'; 


document .body .classList.add (HIDDEN_DETAIL CLASS); 
} 


function initializeEvents() { 


} 




















这 里 通过 document .body 属 性 来 访问 <body> 元 素 ， 这 个 DOM 元 素 与 <body> 标 签 对 应 。 跟 所 
有 DOM 元 素 一 样 ， 它 也 提供 了 一 个 简单 的 方法 来 操作 类 名 。 
这 里 也 是 通过 document .body 调 用 add 方 法 向 <body> 添 加 hidden-detail 类 。 


7.1.3 ”监听 键盘 事件 


现在 需要 一 个 方法 来 触发 大 图 的 隐藏 。 和 先前 一 样 , 需要 使 用 一 个 事件 监听 器 , 但 是 这 次 的 
和 件 监听 右 将 监听 按键 而 非 鼠 标点 击 。 

“按键 ”通常 是 指 一 个 键 按 下 并 抬 起 ， 但 这 个 看 似 简单 的 过 程 实际 上 会 触发 多 个 事件 。 当 键 
被 按 下 时 ， 首 先 会 触发 keydown 事 件 ; 如 果 按 下 的 是 一 个 字母 键 ( 与 Shift 这 种 功能 键 相对 的 键盘 
键 )， 则 还 会 触发 keypress 事 件 。 当 键 被 释放 时 ， 会 触发 keyup 事 件 。 

对 Ottergram 不 必 区 分 上 述 事件 ， 这 里 将 使 用 keyup。 

在 main.js 中 加 入 一 个 名 为 addKeyPressHandler 的 函数 ， 它 会 调用 document. 
body.addEventListener，,， 传 入 一 个 值 为 'keyup' 的 字符 串 和 一 个 匿名 函数 ， 这 个 匿名 函 
数 声 明了 一 个 名 为 event 的 参数 。 请 确保 在 该 匿名 函数 内 event 调 用 了 perventDefault 池 
数 ， 并 通过 console.1log 输 入 event 的 keyCode。 
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function hideDetails() { 
} 


function addKeyPressHandler() { 
'use strict'; 
document .body.addEventListener('keyup', function (event) { 
event .preventDefault(); 
console.log(event.keyCode); 
}); 
} 
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function initializeEvents() { 


i i 





所 有 的 按键 事件 都 有 一 个 与 触发 事件 的 键 对 应 的 属性 , 称 为 keyCode。keyCode 是 一 个 整数 ， 
比如 13 是 回 车 的 keyCode ，32 是 空格 的 keyCode， 而 38 则 是 上 箭头 的 keyCode。 

修改 main.js 中 的 ijnitializeEvents， 让 它 也 调用 addKeyPressHandler。 由 此 ，<body> 元 
素 便 可 以 在 页 面 加 载 时 监听 键盘 事件 了 。 


function initiaLizeEvents() { 
"use Strict'; 
var thumbnails = getThumbnailsArray(); 
thumbnails.forEach(addThumbClickHandler); 
addKeyPressHandler(); 

} 


initializeEvents(); 


保存 修改 并 返回 浏览 器 ,确保 控制 台 可 见 。 点 击 页 面 使 得 焦点 从 开发 者 工具 中 移出 ( 否则 将 
无 法 触发 事件 监听 器 )。 敲 几 下 键盘 上 的 键 ， 控 制 台中 会 输出 相应 的 数字 ( 如 图 7-7 所 示 )。 
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中 Elements Console » 





© 守 top v 国 Preservelog 





84 main.js:67 
3 main.js:67 
73 main.js;67 
83 main.js:67 
32 main.js:67 
73 main. js:67 
83 main.js:67 
32 main.js:67 
65 main.js:67 
32 main.is:67 
83 main.js:67 
69 main.js:67 
67 main.js:67 
82 main.js:67 
69 main.js:67 
84 main.js:67 
2 main.js:67 
77 main.js:67 
69 main.js:67 
四 83 main.js:67 
65 main.js:67 
71 main.js:67 
69 main.js:67 
49 main.js:67 
中 16 main.js:67 
》 


7-7 在 控制 台 上 记录 keyCode 
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可 以 看 到 相应 





如 果 只 希望 在 按 下 Esc 键 ， 而 非 按 下 任意 键 时 隐藏 大 图 ， 就 先 获 一 下 Esc 键 
的 event ,keyCode 是 27。 通 过 它 ， 可 以 让 事件 监听 需 变 得 更 加 明确 。 

在 main.js 顶 部 加 入 一 个 变量 来 代表 Esc 刍 的 值 。 

var DETAIL IMAGE SELECTOR = '[data-image-role="target"]'; 

var DETAIL TITLE SELECTOR = '[data-image-role="title"]'; 

var THUMBNAIL LINK SELECTOR = '[data-image-role="trigger"]'; 


var HIDDEN DETAIL CLASS = 'hidden-detait ' ; 
var ESC KEY = 27; 














修改 keyup 事 件 监听 器 ， 使 其 在 event .keyCode 的 值 与 ESC _ KEY 的 值 相等 时 调用 
hideDetails 也 数 。 





function addKeyPressHandler() { 
"Use strict',; 
document .body.addEventListener('keyup', function (event) { 
event.preventDefault(); 
console.log(event.keyCode); 
if (event.keyCode === ESC _KEY) { 
hideDetails(); 
} 
}); 
} 


使 用 严格 相等 运算 符 ( === ) 来 比较 event.keyCode 和 ESC KEY 两 者 的 值 。 当 它们 相等 时 ， 
调用 hideDetaitLs 函 数 。 

也 可 以 使 用 松散 相等 运算 符 ( == ) 来 做 比较 运算 , 不 过 通常 使 用 严格 相等 运算 符 是 更 好 的 选 
择 。 这 两 个 运算 符 的 主要 区 别 在 于 后 者 会 自动 进行 类 型 转换 , 而 前 者 不 会 。 在 严格 相等 运算 符 下 ， 
如 果 运 算 符 两 边 的 类 型 不 相同 ， 比 较 的 结果 将 会 是 false。 

许多 前 端 开 发 者 将 这 种 自动 类 型 转换 称 为 强制 类 型 转换 ， 通 常 发 生 在 比较 (使 用 比较 运算 
符 )、 相 加 (数值 ) 或 连接 (字符 串 ) 两 个 值 时 。 

正 因为 有 了 强制 类 型 转换 ， 将 字符 串 "27" 与 数字 42 相 加 是 没有 语法 错误 的 ， 尽 管 结果 可 能 
不 似 我 们 所 想 ( 如 图 7-8 所 示 )。 











[x 上 Elements Console Sources Ne 
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"27" + 42 
"2742" 
> | 


图 7-8 ”JavaScript 会 自动 进行 类 型 转换 


这 一 点 在 处 理由 用 户 提供 的 数据 时 极为 重要 ， 第 10 章 将 会 用 到 与 此 相关 的 知识 。 
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保存 mainjs， 并 在 浏览 器 中 测试 新 添加 的 功能 ( 如 图 7-9 所 示 )。 


CY 加 Sy ore a 
人 是 € CG | localhost:3000/¢ Ys 











€ 3 0 localhost3000/# 3 


OTTERGRAM OTTERCRA 





Esc 








图 7-9 ” 哇 ! 按 Esc 键 隐藏 了 大 图 和 大 图 标题 





7.1.4 重新 显示 大 图 


有 个 很 小 但 却 很 重要 的 功能 需要 添加 : 再 次 显示 大 图 。 这 个 结果 由 点 击 一 张 缩 略 图 触发 。 

使 用 clLassList .add 可 以 在 <body> 元 素 中 添加 类 名 ; 反 过 来 ， 当 一 张 缩 略 图 被 点 击 时 ， 可 
以 使 用 classList. remove 来 删除 添加 进去 的 类 名 。 在 main.js 中 添加 一 个 名 为 showDetails 的 新 
函数 。 


function hideDetails() { 


} 
function showDetails() { 


'use strict'; 
document .body .classList.remove(HIDDEN_DETAIL CLASS); 


} 


function addKeyPressHandler() { 


} 


不 需要 添加 新 的 事件 监听 器 ， 只 要 在 addThumbClickHandler 函 数 中 调用 showDetails 就 可 
以 了 。 
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function addThumbClickHandler(thumb) { 
"use strict'; 
thumb.addEventListener('click', function (event) { 
event.preventDefault(); 
setDetailsFromThumb (thumb ) ; 
showDetails(); 
}); 
} 





保存 mainjs 并 切换 到 浏览 器 , 测试 一 下 隐藏 大 图 这 项 新 功能 。 然 后 点 击 一 张 缩 略图 令 其 重新 
显示 ( 如 图 7-10 所 示 )， 水 猎 们 看 起 来 很 喜欢 这 一 新 功能 ， 不 是 吗 ? 





eo = [和 
Tocahost 30007 


和 
不 
v 
a 


| 县 € CC localhost3000/y 


OTTERGRAM 一 OTTERGRAM orTERGRAM 


| 单 击 一 ~ ~ 


| 二 ESse 一 








图 7-10” 按 Esc 键 隐藏 大 图 ， 单 击 显示 大 图 


使 用 媒体 查询 后 ，Ottergram 可 以 根据 视 口 尺寸 动态 地 调整 布局 ， 并 且 响 应 用 户 输入 。 
目前 布局 的 变化 是 突然 发 生 的 。 而 在 下 一 节 中 ， 将 使 用 CSS 渐 变 来 进行 平滑 的 转变 。 


7.2 ”使 用 CSS 过 渡 改 变 状态 


CSS 过 渡 可 以 创造 从 一 种 视觉 状态 变化 到 另 一 种 视觉 状态 的 效果 , 这 正 可 以 使 Ottergram 页 面 
的 隐藏 /显示 效果 更 加 平滑 。 

创建 CSS 过 渡 时 需要 告诉 浏览 器 :“ 我 希望 这 个 元 素 的 样式 变 为 这 些 新 的 属性 。 我 一 告诉 你 ， 
你 就 给 我 变 。” 

一 个 常见 的 例子 就 是 很 多 网 站 上 的 弹出 式 菜单 ， 比 如 在 小 屏幕 上 访问 bignerdranch.com。 在 
一 个 视 口 较 罕 的 浏览 右上 点 击 菜单 按钮 ， 让 导航 菜单 从 顶端 弹出 但 它 并 不 是 一 次 性 全 弹出 ， 
而 是 从 页 面 顶部 滑 下 来 。 从 初始 状态 ( 隐藏 ) 到 终止 状态 (可见 ) 之 间 有 一 段 明显 的 动画 效果 ( 如 
图 7-11 所 示 )。 再 次 点 击 菜单 图 标 ， 导 航 菜单 又 会 滑 上 去 并 再 次 隐藏 。 
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CE 画 国 wapeerwceu 三 EE 画 5owoaRaa-Weon > 
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WE TEACH WE TEACH 


WE WRITE WE WRITE 


ABOUT 





We Develop We Develop We Develop 


custom apps for clients around the world. custom apps for clients around the world. custom apps for clients around the world 
ONTACT 


workwik vs OO workwikh ts O mon 和 


We Teach We Teach We Teach We Teach 


图 7-11 bignerdranch.com 网 站 上 的 弹出 式 导航 


在 创建 显示 和 隐藏 大 图 的 过 渡 效 果 之 前 ， 需 要 先 为 缩 略 网 创建 一 个 简单 的 过 渡 。 

一 般 来 说 ， 可 以 通过 下 面 3 步 来 创建 过 渡 效 果 。 

(1) 确定 终止 状态 的 样子 。 向 目标 元 素 添 加 终止 状态 的 CSS 声 明 是 一 个 不 错 的 办 法 ， 这 样 可 
以 在 浏览 器 中 看 见 这 些 效 果 ， 确 保 它们 的 显示 效果 与 设想 一 致 。 

(2) 将 声明 从 目标 元 素 已 有 的 代码 块 移 至 新 的 CSS 代 码 块 ， 以 便 在 新 的 块 上 使 用 新 的 选择 器 。 

(3) 向 目标 元 素 添加 一 个 过 渡 声 明 , 过 渡 属 性 会 告诉 浏览 器 从 当前 CSS 属 性 值 到 终止 CSS 属 性 
值 间 要 有 一 段 视觉 动画 ， 并 且 该 过 渡 效 果 应 持续 一 段 时 间 。 














7.2.1 变形 


第 一 个 过 渡 效 果 是 当 光 标 在 缩 略 图 上 悬 停 时 其 尺寸 会 变 大 ( 如 图 7-12 所 示 )。 这 里 并 不 去 直 
接 修改 width 或 height 样 式 , 而 是 使 用 transform( 变形 ) 属 性 一 一 它 可 以 改变 某 一 元 素 的 形状 、 
尺寸 、 角 度 以 及 位 置 ， 同 时 不 影响 其 周围 的 元 素 。 














图 7-12 ”缩放 效果 下 的 缩 略 图 


需要 进行 过 渡 处 理 的 目标 元 素 是 .thumbnaiL-item。 首 先 ， 将 transform 声 明 直 接 添加 
到 .thumbnail-item 元 素 。 
通过 测试 确定 已 实现 预期 效果 后 ， 应 当 将 变形 相关 代码 移动 至 新 的 ,thumbnail-item: 
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hover 声 明 块 中 。 最 后 ， 再 将 transition 声 明 添 加 到 .thumbnail-item。 
在 styles.css 中 ， 先 在 .thumbnail-item 中 加 入 transform 声 明 : 


.thumbnail-item { 
display: inline-block; 
min-width: 120px; 
max-width: 120px; 
border: lpx solid rgb(100%, 100%, 100%); 
border: lpx solid rgba(100%, 100%, 100%, 0.8); 


transform: scale(2.2); 


transform: scale(2.2) 告 诉 浏览 如 该 元 素 需 要 显示 为 其 原 尺 寸 的 220%。 在 transform 中 
还 可 以 用 到 很 多 其 他 的 值 ， 包 括 最 新 的 3D 效 果 ， 在 MDN 上 ( developer.mozilla.org/en-US/docs/ 
Web/CSS/transform ) 可 以 找到 很 好 的 说 明 。 

保存 并 在 浏览 器 上 查看 更 改 后 的 效果 ( 如 图 7-13 所 示 ) 





图 7-13 ”自动 变 大 的 水 猎 缩 略图 
可 以 看 到 缩 略 图 比 之 前 大 了 ,事实 上 它们 的 尺寸 有 点 过 大 了 ， 更 改 一 下 相关 的 值 使 它们 小 





.thumbnail-item { 
display: inline-block; 
min-width: 120px; 
max-width: 120px; 
border: lpx solid rgb(100%, 100%, 100%); 
border: lpx solid rgba(100%, 100%, 100%, 0.8); 


transform: scale(1.2); 
} 


这 次 保存 后 ， 应 该 可 以 看 到 水 狂 缩 略图 的 尺寸 仅 比 它们 的 原 尺寸 大 了 一 点 点 ( 如 图 7-14 所 示 )。 
现在 的 缩 略 图 尺寸 看 起 来 不 错 ， 可 以 继续 进行 下 一 步 了 。 
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Lesley | Barbara | Barry 


图 7-14 ”大 小 适中 的 水 猎 缩 略图 


7.2.2 添加 CSS 过 渡 效 果 


接 下 来 将 终止 状态 样式 移 到 一 个 新 的 样式 声明 中 ， 同 时 给 .thumbnaitL-item 元 素 添加 过 渡 
效果 。 

当 用 户 的 鼠标 光标 在 一 张 缩 略 图 上 翘 停 时 ， 该 缩 略 图 的 尺寸 应 该 被 放大 为 原 尺 寸 的 120%。 
在 styles.css 中 添加 一 个 修饰 符 :nover 的 声明 块 来 说 明 此 样式 仅 应 用 于 鼠标 悬 停 时 。 


.thumbnail-item { 
display: inline-block; 
min-width: 120px; 
max-width: 120px; 
border: lpx solid rgb(100%, 100%, 100%); 
border: lpx solid rgba(100%, 100%, 100%, 0.8); 


transform: scale(1.2); 
} 


.thumbnail-item:hover { 
transform: scale(1.2); 
} 


这 个 修饰 符 的 名 称 叫 伪 类 ， 伪 类 :hover 会 在 用 户 的 鼠标 悬 停 在 某 一 元 素 上 时 与 其 匹配 。 除 
此 之 外 , 还 有 大 量 的 伪 类 关键 字 用 以 描述 一 个 元 素 所 处 的 不 同 状态 , 本 书后 面 关 于 表单 的 部 分 将 
会 涉及 这 一 部 分 内 容 ， 同 时 在 MDN 上 可 以 了 解 到 更 多 的 相关 内 容 。 

接着 ， 在 styles.css 中 向 .thumbnail-item 加 入 transition 声 明 以 添加 过 渡 效 果 ， 这 里 需要 
指定 动画 效果 的 属性 以 及 时 间 长 度 。 





.thumbnail-item { 
display: inline-block; 
min-width: 120px; 
max-width: 120px; 
border: lpx solid rgb(100%, 100%, 100%); 
border: lpx solid rgba(100%, 100%, 100%, 0.8); 
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transition: transform 133ms 
} 


.thumbnail-item:hover { 
transform: scale(1.2); 
} 
以 上 代码 为 transition 设 置 了 transform 属 性 ， 告 诉 浏览 器 这 段 样式 变化 要 以 动画 形式 来 
表现 ， 并 且 动画 的 样式 是 transform。 另 外 ， 代 码 中 也 指定 了 过 渡 动画 应 该 持续 133 毫 秒 。 
保存 并 测试 一 下 这 个 新 的 过 渡 效 果 , 应 该 可 以 看 到 当 鼠 标 悬 停 在 每 张 缩 略图 上 时 该 缩 略图 会 
放大 ， 而 当 鼠 标 移 开 时 则 相反 ， 缩 略图 又 缩小 到 原来 的 玉 寸 (如 图 7-15 所 示 )。 





悬 停 时 表现 出 的 过 渡 效 果 ， 移 开 时 过 渡 效 果 相 反 


图 7-15 


开发 者 工具 提供 了 一 个 测试 伪 类 状态 的 便捷 方法 。 切 换 到 Elements 面 板 ， 展 开标 签 直 到 可 以 
看 到 <Li> 标 签 。 单 击 该 标签 使 其 高 亮 ,这 时 可 以 看 到 左边 显示 有 省 略 号 。 单 击 该 省 略 号 ， 这 时 可 
以 在 上 下 文 菜单 中 看 到 伪 类 ， 从 中 选择 :hover (如 图 7-16 所 示 )。 


p<li Class=" ‘thumbnail-item">..</1i> 
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图 7-16 ”在 Elements 面 板 中 触发 一 个 伪 类 


此 时 Elements 面 板 中 的 <Li> 标 签 旁边 出 现 了 一 个 橙色 的 圆圈 , 表明 一 个 伪 类 通过 开发 者 工具 
被 激活 了 。 这 种 情况 下 ， 即 使 鼠标 移 上 去 又 移 开 ， 该 标签 对 应 的 缩 略 图 仍 将 保持 :hover 状 态 。 


Scroll into View 






Break on.… p 





les.css:71 
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单 击 橙色 圆圈 再 次 打开 快捷 荣 单 ， 禁 用 :hover 状 态 。 

过 渡 效 果 看 起 来 很 赞 , 不 过 仍然 有 个 小 小 的 甫 普 。 目 前 的 悬 停 效 果 会 造成 缔 略 图 的 一 部 分 被 
截 掉 , 这 是 因为 应 用 在 .thumbnail-item 上 的 transform 效 果 并 未 使 得 其 父 元 素 也 同步 调整 自己 
的 尺寸 。 解 决 方法 是 额外 为 .thumbnail-1list 添 加 内 边 距 一 一 在 styles.css 中 更 改 ,thumbnail- 
list 的 垂直 内 边 距 。 


.thumbnail-list { 
flex: 0 1 auto; 
order: 2; 
display: flex; 
justify-content: space-between; 
list-style: none; 


padding:— 0; 
padding: 20px 0; 
white-space: nowrap; 


overflow-x: auto; 


} 





上 面 的 代码 使 用 了 内 边 距 的 简写 写法 , 其 中 前 面 的 值 (20px ) 指定 了 上 内 边 距 和 下 内 边 距 的 
值 ， 而 后 面 的 值 则 指定 了 左 内 边 距 和 右 内 边 距 的 值 。 在 @media 查 询 中 也 要 作出 相似 的 修改 ,但 
同时 要 把 左右 内 边 距 分 别 设 为 35px。 





Gmedia all and (min-width: 768px) { 
.main-content { 


} 


.thumbnail-list { 
flex-direction: column; 
order: 0; 
margin-left: 20px; 


padding: 0 35px; 
} 


保存 更 改 并 在 浏览 器 中 查看 新 添加 的 效果 ,可 以 看 到 这 次 的 效果 比 原 来 的 好 多 了 【如 图 7-17 
所 示 )。 








图 7-17 在 横向 和 纵向 上 为 悬 停 效 果 留 出 空间 
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7.2.3 ”使 用 定时 函数 


现在 的 悬 停 效 果 超 棒 ! 不 过 仍然 缺少 一 些 让 它 看 起 来 与 众 不 同 的 突出 视觉 效果 。 通 过 CSS 过 
渡 效 果 ， 不 仅 可 以 规定 过 湾 动 画 持续 的 时 间 ， 还 能 使 动画 效果 在 途中 表现 出 不 同 的 速度 。 

过 渡 效 果 有 若干 可 选 的 定时 函数 ,默认 使 用 的 是 线性 定时 函数 ， 即 让 过 渡 动 画 匀速 完成 。 
他 的 定时 函数 则 更 加 有 意思 ， 可 以 使 过 渡 动 画展 现 出 加 速 或 减速 的 效果 。 

在 tyles.css 中 更 改 先前 的 过 渡 效 果 一 一 改 为 使 用 ease-in-out 定 时 函数 。 这 个 函数 可 让 过 渡 
动画 的 速度 在 开始 和 结束 时 较 慢 而 中 间 较 快 。 




































































.thumbnail-item { 
display: inline-block; 
min-width: 120px; 
max-width: 120px; 
border: lpx solid rgb(100%, 100%, 100%); 
border: lpx solid rgba(100%, 100%, 100%, 0.8); 


transition: transform 133ms ease-in-out; 


} 








保存 修改 并 拿 一 张 缩 略图 测试 一 下 。 可 以 看 到 效果 虽然 不 其 明显 ， 不 过 的 确 有 变化 。 

除 此 之 外 还 有 很 多 可 供 使 用 的 定时 函数 , 这 部 分 可 以 参阅 MDN ( developer.mozilla.org/en-US/ 
docs/Web/CSS/transition-timing-function )。 

现在 的 过 渡 样 式 动画 在 开始 和 结束 时 的 速度 是 相同 的 。 但 这 也 可 以 更 改 ; 根据 过 渡 的 方向 来 
设 定 不 同 的 值 。 当 在 初始 状态 和 终止 状态 的 声明 中 指定 transition 属 性 后 ， 浏 览 器 便 会 在 表现 
过 渡 动 画 效果 时 按时 间 顺 序 使 用 声明 中 已 经 给 定 的 值 。 

下 面 通过 一 个 简单 的 例子 来 解释 一 下 。 首 先 在 styles.css 中 向 .thumbnail-item:hover 添 加 
transition 声 明 (可 以 先 在 浏览 器 中 更 改 ， 方 便 以 后 删除 )。 












































.thumbnail-item:hover { 
transform: scale(1.2); 
transition: transform 1000ms ease-in; 


} 





保存 修改 并 在 浏览 器 中 将 光标 上 甚 停 在 其 中 一 个 缩 略 图 上 , 可 以 看 出 放大 效果 变 慢 了 , 需要 整 
整 1 秒 钟 ， 这 是 因为 该 效果 使 用 了 在 .thumbnail-item: hover 中 声明 的 值 。 将 光标 从 缩 略图 上 
移 开 ， 可 以 看 到 此 时 的 动画 效果 仅 为 133 毫 秒 ， 即 在 .thumbnaitL -item 中 声明 的 值 。 

在 继续 之 前 ， 先 删除 刚才 对 ,thumbnait-item: hover 所 做 的 更 改 。 











.thumbnail-item:hover { 
transform: scale(1.2); 
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7.2.4 基于 类 的 过 渡 效果 


第 二 个 过 渡 效 果 是 让 .detail-image-frame 看 起 来 像 是 从 很 远 的 地 方 拉 近 的 。 

这 次 将 通过 使 用 JavaScript 添 加 /删除 类 名 而 不 是 使 用 伪 类 选择 器 ) 来 触发 过 渡 效 果 。 为 什 
么 呢 ? 因为 没有 与 单 击 事件 对 应 的 伪 类 ， 使 用 JavaScript 可 以 在 UI 变 化 和 触发 时 实现 更 好 的 控制 。 

另外 , 还 可 以 为 过 渡 效 果 的 开始 阶段 和 结束 阶段 设 定 不 同 的 持续 时 间 。 最 后 的 效果 是 : 单 击 
一 张 缩 上 略图， 相应 的 水 狠 图 片 便 会 作为 大 图 展示 出 来 ,从 大 图 区 域 中 心 一 个 很 小 的 点 开始 ,逐渐 
放大 至 其 原始 尺寸 ( 如 图 7-18 所 示 )。 








图 7-18 单 击 一 张 缩 略图 ， 使 其 从 小 图 放大 到 原始 大 小 
首先 ， 在 styles.css 中 加 入 一 个 新 的 类 样式 声明 is-tiny。 


.detail-image-frame { 
} 
.is-tiny { 
transform: scale(0.001); 


transition: transform Oms; 


} 


.detail-image { 


上 面 的 代码 为 .is-tiny 添 加 了 两 个 样式 。 第 一 个 样式 将 元 素 缩小 至 相对 于 其 原 尺寸 来 说 很 
小 的 一 个 区 块 ， 而 第 二 个 样式 指定 了 该 transfo rm 属性 过 渡 效 果 的 时 长 为 0 毫秒 ， 也 就 是 立即 变 
得 非常 小 。 换 句 话 说 ， 在 ,is-tiny 类 的 样式 中 ， 大 图 实际 上 是 没有 过 渡 动 画 效果 的 ， 因 为 该 动 
画 持续 时 间 为 0 毫秒 ， 没 必要 为 其 指定 定时 函数 。 

接 下 来 ， 添 加 一 个 持续 时 间 为 333 毫 秒 的 transition 声 明 ， 这 个 值 将 用 于 从 ,is-tiny 类 的 
样式 过 渡 到 下 一 个 样式 的 动画 效果 ， 即 在 三 分 之 一 秒 内 将 大 图 放大 到 正常 尺寸 。 将 transition 
的 声明 添加 到 styles.css 的 .detail-image-frame 中 。 


.detail-image-frame { 
position: relative; 
text-align: center; 
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transition: transform 333ms 


} 











先 保存 对 styles.css 的 修改 再 继续 。 


7.2.5 通过 JavaScript 触 发 过 渡 效 果 














过 湾 效 果 的 样式 已 经 写 好 了 ， 下 一 步 需要 做 的 是 使 用 JavaScript 来 触发 它们 。 在 index.html 








的 .detail-image-frame 中 添加 一 个 数据 





el 


<div class="detail-image-container"> 
<div class="detail-image-frame" data-image-role="frame"> 


属性 ， 使 其 





二 与 JavaScript 挂 钩 。 


<img class="detail-image" data-image-role="target" src="img/otterl.jpg" alt=""> 
<span class="detail-image-title" data-image-role="title">Stayin' Alive</span> 


</div> 
</div> 


保存 index.html, 然后 在 main.js 中 为 ,is-tiny 类 和 data-image- roLe="frame" 选 择 需 添加 变 








| 


量 。 完 成 后 ， 修 改 showDetails 函 数 ， 使 其 切换 类 名 ， 从 而 触发 过 渡 动 画 。 





首先 添加 一 个 名 为 DETAIL FRAME SELECTOR 的 变量 ， 其 值 为 选择 器 字符 串 ' [data-image- 


role="frame"]'。 青 添加 一 个 名 为 TINY_EFFECT_CLASS 的 变量 ,其 


>™~ 


var DETAIL IMAGE SELECTOR 
var DETAIL TITLE SELECTOR 
var DETAIL_ FRAME SELECTOR 





'[data-image-role="target"]'; 
'[data-image-role="title"]'; 
'[data-image-role="frame"]'; 


var THUMBNAIL LINK SELECTOR = '[data-image-role="trigger"]'; 


var HIDDEN DETAIL CLASS = 'hidden-detait ' ; 


var TINY_EFFECT_CLASS = 'is-tiny'; 
var ESC KEY = 27; 


值 为 is-tiny。 


这 两 个 变量 的 顺序 无 关 紧要 ( 对 浏览 器 而 言 没有 差别 )， 不 过 按照 相同 规则 排序 可 读 性 更 好 





























。 在 mainjs 中 ， 选 择 器 变量 后 面 都 是 类 变量 ， 最 

















后 是 Esc 键 的 键 值 。 


ne 取得 元 素 [data-image-rote="frame"] 的 引用 。 为 了 触 


发 transition 类 ， 需 要 先 添加 TINY_EFFECT_CLASS 然 后 


function showDetails() { 
"use strict'; 




















再 删除 它 。 


var frame = document.querySelector(DETAIL FRAME SELECTOR); 


document.body.classList.remove(HIDDEN DETAIL CLASS); 
frame.classList.add(TINY EFFECT_CLASS); 
frame.classList. remove(TINY EFFECT_ CLASS); 


如 果 将 上 述 改 动 保存 并 在 浏览 器 中 测试 的 话 , 将 会 看 到 过 


寸 渡 效 一 


‘i 

















并 没有 出 现 , 为 什么 ? 原因 


7.3 自 定 义 定 时 函数 141 





是 TINY_EFFECT_CLASS 在 添加 后 立刻 又 被 删 掉 了 ， 最 终结 果 就 是 没有 可 被 泻 染 的 类 变化 ， 这 是 
浏览 需 端 的 一 个 优化 措施 。 

因此 需要 在 删除 TINY_EFFECT_CLASS 之 前 加 一 个 短 延 迟 ， 但 JavaScript 并 没有 像 其 他 语言 一 
样 提 供 一 个 内 建 的 延迟 或 睡眠 函数 。 嗯 ， 看 来 得 想 个 变通 策略 了 。 

， 使 用 setTimeout 方 法 ， 其 参数 是 一 个 函数 名 和 一 段 延 迟 时 间 〈 以 毫秒 计 )。 延 迟 时 间 
过 后 ， 该 函数 将 进入 相应 队列 等 待 浏览 器 执行 。 

0 classList.add 函 数 代 码 的 后 面 添 加 一 个 对 setTimeout 的 调用 ， 疝 
其 传人 两 个 参数 : 包含 接 下 来 要 执行 步骤 的 函数 ， 和 调用 该 函数 前 等 待 的 时 间 。 本 例 中 接 下 来 要 
执行 的 仅 有 一 步 ， 即 删除 TINY_EFFECT_CLASS。 











function showDetails() { 
"Use strict'; 
var frame = document.querySelector(DETAIL FRAME SELECTOR); 
document .body.classList.remove(HIDDEN DETAIL CLASS); 
frame.classList.add(TINY EFFECT CLASS); 
setTimeout(function () { 

frame.classList.remove(TINY EFFECT CLASS); 

}, 50); 

} 


仔细 阅读 上 面 的 代码 。 首 先 ， 向 frame 元 素 添 加 ,is-tiny 类 ， 其 效果 便 是 transform: 
scale(0.001)。 

浏览 器 等 待 50 上 毫秒 后 向 自己 的 执行 队列 中 加 入 一 个 匿名 函数 。 执 行 showDetails 也 数 ，50 
毫秒 后 匿名 函数 入 队 等 待 执行 ( 该 隐 数 要 等 待 它 前 面 的 函数 释放 所 占用 的 CPU 资 源 )。 

当 该 匿名 函数 执行 时 , 它 会 从 frame 的 类 列表 中 删除 TINY_EFFECT_CLASS。 这 会 触发 长 度 为 
333 上 毫秒 的 transform 动 夯 效 果 ， 最终 frame 的 尺寸 会 扩大 至 其 原始 大 小 。 

保存 本 次 修改 并 测试 下 效果 。 单 击 缩 略 图 , 可 以 看 到 这 些 滑 移 的 水 猎 图 片 逐渐 放大 直至 可 供 











欣赏 。 
7.3 自 定 义 定 时 函数 


下 面 为 Ottergram 锦 上 添 花 : 为 过 渡 效 果 自 定义 一 个 定时 函数 来 代替 有 限 的 内 置 定 时 函数 。 
定时 函数 可 以 通过 曲线 图 来 说 明 ， 内 置 定时 函数 的 曲线 图 ( 来源 网 站 : cubic-bezier.com ) 如 


”国葬 网 风 区 


ease linear ease-in ease-out ease-in-out 


图 7-19 内置 的 定时 函数 
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上 面 的 5 幅 图 像 中 的 曲线 被 称 为 三 次 贝 塞 尔 曲线 ， 描 述 了 过 渡 动 画 随时 间 变 化 的 规律 。 它 们 
由 4 个 控制 点 定义 。 通 过 确定 4 个 控制 点 来 确定 一 条 曲线 ， 就 可 以 自 定义 过 渡 效 果 了 。 下 面 在 
styles.css 中 为 .detaitL-image-frame 添 加 带 cubic-bezier 函 数 的 transition 声 明 。 























.detail-image-frame { 
position: relative; 
text-align: center; 


transition: transform 333ms cubic-bezier(1, .06, .28,1); 
} 








保存 修改 并 在 浏览 器 中 单 击 几 张 缩 略 图 ， 查 看 过 渡 效 果 是 否 有 了 变化 。 
多 亏 了 开发 者 Lea Verou 和 她 的 网 站 ( cubic-bezier.com ) 提供 的 实用 工具 ， 自 定义 定时 函数 变 
得 轻松 愉快 了 许多 (如 图 7-20 所 示 )。 





© 9 /cubic-bezior(,.06,.51,09) x 


© [oy Cubic-bezier.com/#1,.06,.51,.99 


cubic-bezier(1,.06,.51,.99) 


Preview & compare Library 
Duration: Wr 5 1 second Click on a curve to compare it with the current 
ease linear ease-in 


ls 


ease-out ease-ln-out 





PROGRESSION 


TIME We es click on any library cu ne 入 a ms ok 
o get a permalink to 
ee rs 


2,035 


图 7-20 ”在 cubic-bezier.com 上 自 定义 定时 函数 


左 侧 是 一 条 带 有 红色 和 蓝 色 可 拖 动 控 制 点 的 曲线 ， 该 曲线 表示 在 当前 阶段 进行 转变 的 程度 。 
单 击 并 拖 搜 控 制 点 来 修改 曲线 。 当 图 像 改变 时 ， 页 面 顶端 表示 控制 点 值 的 10 进 制 数字 也 会 改变 。 

右 侧 是 内 置 的 定时 函数 : ease 、linear、ease-in、ease-out 和 ease-in-out。 单 击 其 中 
的 一 个 ， 然 后 单 击 Preview&compare 旁 边 的 GO! 按 钮 。 接 着 就 会 展示 自 定义 定时 函数 所 表现 出 的 
动画 效果 ， a 

创建 一 个 自 定义 定时 函数 , 感到 满意 后 将 三 次 贝 塞 尔 曲线 控制 点 的 值 从 网 站 上 复制 下 来 ,， 粘 
贴 到 styles.css 中 的 相应 位 置 。 














7.4 延展 阅读 : 强制 类 型 转换 的 规则 143 





.detail-image-frame { 
position: relative; 
text-align: center; 


transition: transform 333ms Cubic-bezier( 把 自 定义 的 值 粘贴 到 这 里 ) ; 








恭喜 ! Ottergram 网 站 已 功能 齐备 。 保 存 相 关 文件 并 且 欣 赏 一 下 最 终 的 效果 吧 。Ottergram 已 
经 从 一 个 简单 、 静 态 的 网 页 变 成 了 一 个 可 交互 、 可 响应 并 带 有 动画 视觉 效果 的 页 面 。 

整个 项 目 已 经 取得 了 很 大 的 进展 , 相信 你 也 从 中 学 到 了 很 多 前 端 开 发 的 基础 知识 。 该 跟 水 猎 
们 说 再 见 了 ， 因 为 下 一 章 我 们 又 会 开始 一 个 新 项 目 。 


7.4 延展 阅读 : 强制 类 型 转换 的 规则 


正如 在 第 6 章 中 所 提 到 的 ，JavaScript 最 初 的 开发 宗旨 是 使 普通 人 ， 而 不 是 专业 的 程序 员 可 以 
为 网 页 添加 交互 元 素 。 而 一 个 “普通 人 ”是 不 应 该 担心 一 个 值 到 底 是 数值 ， 是 对 象 ， 或 者 是 个 香 
区 的 。( 开 个 玩笑 ，JavaScript 中 没有 香蕉 这 个 类 型 。) 
达成 上 述 目的 的 方法 之 一 便 是 强制 类 型 转换 。 通 过 强制 类 型 转换 , 可 以 直接 使 用 == 操 作 符 对 
两 个 值 进 行 比较 ， 或 是 使 用 + 操作 符 对 两 个 值 进 行 连接 ， 而 不 用 去 管 它 们 的 类 型 。 在 进行 这 类 操 
作 时 ，JavaScript 会 设法 使 其 成 功 即使 结果 看 起 来 有 点 奇怪 ， 比 如 把 字符 串 "2" 转 换 成 数值 2。 
强制 类 型 转换 对 程序 员 和 非 程序 员 都 是 个 困扰 。 大 部 分 程序 员 认 为 最 好 还 是 使 用 严格 比较 ， 
即 === 比 较 好 。 不 过 强制 类 型 转换 的 规则 在 语法 中 早已 被 严格 定义 过 了 ， 因 此 有 必要 了 解 一 下 。 
假设 现在 要 对 两 个 变量 进行 比较 : x == y。 如 果 它 们 的 类 型 相同 ， 并 且 值 相等 ， 比 较 结 果 
将 会 返回 一 个 值 为 true 的 布尔 值 。 唯一 的 例外 是 如 果 x 或 y 的 值 为 NaN 时 (语法 中 规定 该 常数 表示 
“ 非 数 值 ” )， 其 比较 值 为 faLse。 
然而 ， 当 x 和 y 的 类 型 不 同时 ， 事 情 就 复杂 了 。 下 面 便 是 JavaScript 中 的 相关 规则 。 
口 当 比 较 表达 式 null == undefined 和 undefined == nuLL 时 ， 值 为 true。 
口 当 比 较 一 个 字符 串 和 一 个 数值 时 ， 首 先 将 字符 串 转 换 成 等 价 的 数值 形式 。 这 意味 着 "3" 
== 3 的 值 为 true， 而 "dog" == 20 的 值 为 false。 
口 当 比 较 布 尔 值 与 其 他 类 型 值 时 ， 首 先 将 布尔 值 转换 成 数值 : true 转 换 成 1，fatLse 转 换 成 
0。 这 意味 着 false == 0 的 值 为 true， 而 true == 1 的 值 也 为 true。 
口 最 后 ， 将 字符 串 或 数值 与 对 象 进行 比较 时 ， 首 先 试 着 将 对 象 转换 成 一 个 基本 类 型 的 值 ; 
如 果 无 法 转换 ， 再 试 着 将 该 对 象 转换 成 一 个 字符 串 。 
更 多 相关 内 容 ， 请 查阅 MDN 上 的 讨论 ( developer.mozilla.org/en-US/docs/Web/JavaScript/ 


Equality_comparisons_and_ sameness )。 
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模块 、 对 象 和 方法 








在 接 下 来 的 7 章 中 ,我 们 将 为 美食 车 搭建 一 个 管理 咖啡 订单 的 应 用 ， 名 字 叫 作 CoffeeRun。 需 
要 编写 的 代码 分 三 个 层级 : UI、 内 部 逻辑 和 服务 端 交 换 逻 辑 。 

本 章 将 会 说 明 如 何 创 建 CoffeeRun 内 部 逻辑 ， 并 且 通 过 开发 工具 的 控制 台 与 应 用 进行 交互 ， 
如 图 8-1 所 示 。 


[x 口 Elements Console Sources Network Timeline Profiles Resources Security Audits ; Xx 
Oiop Preserve log 


myTruck.createOrder({ email: ‘'me@goldfinger.com', coffee: 'double mocha'}); 
Adding order for me@goldfinger.com truck. is:13 


undefined 
myTruck.createOrder({ email: 'dr@no.com', coffee: 'decaf'}); 


Adding order for dr@no.com truck. jis:13 
undefined 
myTruck.createOrder({ email: ‘'m@bond.com', coffee: 'earl grey'}); 


Adding order for mebond.com truck.js:13 
undefined 

> myTruck.printOrders(); 
Truck #ncc-1701 has pending orders: truck. js:28 
Object {email: "me@goldfinger.com", coffee: "double mocha"} truck. jis:30 
Object {email: "dr@no.com", coffee: "decaf"} truck.js:30 
Object {email: "me@bond.com", coffee: "earl grey"} truck. js:30 
undefined 

> myTruck.deliverOrder('dr@no. com'); 
Delivering order for dr@no.com truck.is:18 
undefined 


myTruck.deliverOrder( 'm@bond. com' ); 

Delivering order for m@bond. com truck.js:18 
Undefined 

myTruck.printOrders(); 


Truck #ncc-1701 has pending orders: truck. jis:28 
Object {email: "me@goldfinger.com", coffee: "double mocha"} truck.js:30 
Undefined 


> | 


图 8-1 ”CoffeeRun 的 底层 逻辑 


8.1 模块 


CoffeeRun 比 Ottergr am 复 杂 了 许多 ， 因 此 能 否 合理 地 组 织 代码 对 调试 和 拓展 十 分 重要 。 
CoffeeRun 将 会 以 组 件 的 方式 组 合 起 来 ， 如 图 8-2 所 示 。 























事件 ss 全 
和 数据 内 部 迎 辑 数据 一 ”ul oov | 全 
数据 一 一 


图 8-2 ”CoffeeRun 组 件 和 交互 一 览 


应 用 中 的 每 一 部 分 都 会 专注 于 一 个 任务 : 内 部 逻辑 模块 负责 处 理 数 据 ，UI 模 块 负责 处 理事 件 
和 DOM 操 作 (和 Ottergram 的 代码 相似 )， 服 务 端 交换 逻辑 模块 负责 和 远 端 服务 器 交互 ， 保 存 或 者 
检索 数据 。 

JavaScript 的 设计 初衷 是 编写 负责 用 户 交 互 的 小 型 脚本 ， 而 非 大 型 应 用 。 昌 然 CoffeeRun 并 不 
复杂 ， 但 仅仅 一 个 脚本 文件 并 不 足以 完成 它 。 

为 了 让 代码 彻底 分 离 ， 需 要 创建 三 个 不 同 的 JavaScript 文 件 ， 分 别 对 应 UI、 内 部 逻辑 和 服务 
端 交换 逻辑 。 我 们 将 以 模块 的 形式 实施 代码 分 离 。 

怎样 将 代码 组 织 成 模块 完全 取决 于 开发 者 。 大 多 数 情况 下 都 以 概念 切 分 代码 ， 如 “广告 ”或 

“菜单 ”。 就 代码 而 言 ， 模 块 是 一 组 相关 函数 的 集合 ， 部 分 函数 可 以 被 外 部 访问 ， 其 余 函 数 则 
只 能 被 模块 内 部 访问 。 

来 想象 一 家 和 餐厅。 它 的 厨房 里 有 各 种 供 厨 师 使 用 的 工具 和 配料 ,而 消费 者 只 能 看 菜单 上 的 若 
干 选项 。 如 果 将 厨房 比 作 食物 制作 模块 的 话 ， 那 么 这 个 菜单 就 是 消费 者 和 厨房 进行 交互 的 接口 。 

同样 ， 如 果 和 餐厅 内 部 拥有 一 个 吧台 ,那么 饮料 制作 工具 和 配料 也 是 内 部 的 , 消费 者 只 能 通过 
饮品 单 进行 选择 ， 所 以 也 可 以 认为 饮品 单 就 是 吧台 和 消费 者 间 交 互 的 接口 。 

作为 消费 者 , 我 们 既 不 能 从 厨房 里 借 来 大 厨 的 菜刀 或 者 使 用 吧台 的 搅拌 机 ,也 不 能 从 冰箱 里 
再 拿 出 一 份 黄油 或 者 为 鸡尾酒 再 多 加 一 杯 配 酒 。 我 们 的 选择 受 限于 厨房 和 吧台 提供 的 菜单 。 

与 之 相似 ，CoffeeRun 的 每 一 个 模块 也 需要 一 些 私 有 函数 只 公开 一 部 分 函数 以 便 其 余 模 
块 与 其 进行 交互 。 

CoffeeRun 将 继续 使 用 ES$， 这 是 能 实现 本 项 目 且 在 目前 浏览 器 中 支持 度 最 高 的 JavaScript 版 
本 (下 一 个 项 目 Chattrbox 将 会 使 用 最 新 的 ES6 )。ES5 并 没有 提供 正式 的 模块 化 方案 ,但 通过 将 相 
关 的 代码 (变量 和 函数 ) 放 在 一 个 函数 内 ， 可 以 获得 类 似 的 效果 。 


8.1.1 模块 模式 


代码 是 可 以 用 函数 进行 组 织 的 , 但 是 通常 采用 常规 函数 的 变 体 来 实现 这 一 目的 。 在 开始 新 项 
目前 ， 先 快速 浏览 用 于 组 织 代码 的 模块 模式 ， 尝 试 一 下 将 Ottergram 里 的 函数 包装 成 模块 。 
以 下 是 一 个 基本 模块 的 代码: 


(function () { 

"use strict'; 

// 放置 要 运行 的 代码 
}) 0); 


如 果 你 是 第 一 次 看 见 这 种 写法 的 代码 , 可 能 会 感到 奇怪 。 这 种 写法 被 称 作 立 即 调用 的 函数 表 
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达 式 (Immediately Invoked Function Expression，IIFE )， 最 好 从 内 到 外 地 去 阅读 它 。 
它 最 主要 的 部 分 是 一 个 匿名 函数 : 
function () { 
"use strict'; 
// 放置 要 运行 的 代码 
} 
之 前 在 Ottergram 中 使 用 过 匿名 函数 ， 所 以 你 应 该 不 会 对 此 感到 陌生 。 
然而 在 本 例 中 ， 匿 名 函数 被 括号 所 包 庄 : 
(function () { 
"use strict'; 
// 放置 要 运行 的 代码 
}) 
这 对 括号 十 分 重要 ， 因 为 它们 告诉 浏览 器 :“ 请 不 要 将 这 组 代码 解释 为 函数 声明 。” 
浏览 器 看 到 这 个 括号 就 会 知道 :“ 啊 , 好 的 。 这 是 一 个 匿名 函数 , 我 会 阻止 它 做 任何 事情 的 ”。 
在 大 多 数 情况 中 , 我 们 会 将 匿名 函数 当 作 一 个 参数 进行 传递 。 而 在 这 个 例子 里 ,我 们 马上 就 
调用 了 它 。 这 是 通过 它 后 面 的 的 空 括号 做 到 的 : 
(function () { 
"use strict'; 
// 放置 要 运行 的 代码 
})() 
当 浏览 器 读 到 空 括号 的 时 候 ， 它 意识 到 你 希望 调用 括号 前 的 任何 东西 :“ 好 吧 ， 我 明白 了 。 
我 现在 有 一 个 匿名 函数 可 以 调用 。 
你 可 能 会 认为 :“ 这 是 疯 了 吧 ! 一 点 用 处 都 没有 。” 事实 上 ,你 已 经 写 过 类 似 的 代码 了 。 回 忆 
一 下 Ottergram 的 初始 化 函数 initializeEvents 一 一 声明 它 之 后 ,我 们 立马 调用 了 它 ， 并 且 之 后 
再 也 没有 调用 过 。 以 下 就 是 当时 的 代码 ; 
function initializeEvents() { // 函数 声明 
"Use Strict' 


var thumbnails = getThumbnaiLsArray() 
thumbnails.forEach(addThumbClickHandler); 









































addKeyPressHandler(); 
} 
initializeEvents(); // 函数 执行 
这 个 函数 的 作用 就 是 将 一 些 步 又 拥 绑 在 一 起 , 并 且 在 页 面 加 载 的 时 候 使 其 运行 。 下 面 是 使 用 
IEFE 模 式 编 写 的 相同 的 代码 。( 你 并 不 需要 更 改 Ottergram 的 代码 ， 这 只 是 为 了 解释 概念 。 
， initiatizeE Of 
(function () { 
"use Strict' 


var thumbnails = getThumbnaiLsArray() ; 
thumbnails.forEach(addThumbClickHandler); 
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addKeyPressHandler(); 
了 
}) (); 


i 
如 果 我 们 想 在 不 创建 额外 的 全 局 变量 或 者 函数 的 前 提 下 只 运行 某 些 代 码 一 次 , IIFE 模 式 是 十 
分 有 用 的 写法 。 要 理解 它 为 什么 这 么 重要 ， 需 要 回顾 一 下 在 Ottergram 中 编写 的 变量 和 函数 。 
我 们 在 Ottergram 中 创建 了 许多 有 用 的 函数 , 并 且 在 需要 的 时 候 调 用 了 它们 。 这些 函 数 都 有 像 
getThumbnaiLsArray 或 者 addKeyPressHandtLer 之 类 的 名 称 。 很 幸运 ， 这 些 名 称 是 唯一 的 。 如 
我 们 尝试 在 两 个 不 同 函数 上 使 用 相同 的 名 称 ， 第 一 个 函数 就 会 被 第 二 个 函数 取代 。 

当 我 们 定义 函数 和 变量 时 ， 它 们 默认 被 添加 到 全 局 命名 空间 中 。 全 局 命名 空间 是 浏览 器 为 
JavaScript 程 序 存储 所 有 函数 和 变量 的 地 方 , 同时 也 是 存储 所 有 内 建 函 数 和 变量 的 地 方 。 一 般 会 使 
用 命名 空间 来 组 织 代码 ， 就 像 会 把 文件 放 在 文件 夹 里 一 样 。 

在 CoffeeRun 中 可 能 会 有 很 多 名 称 相同 的 函数 , 如 add 或 者 addCLickHandter。 如果 把 它们 都 
写 在 全 局 命名 空间 中 , 它们 会 互相 覆盖 。 因 此 ,应 该 在 函数 内 声明 它们 ,这 能 避免 它们 被 外 界 的 
代码 访问 或 者 覆盖 。 

因为 我 们 是 在 模块 内 组 织 代码 ， 所 以 可 能 会 想 让 一 部 分 (不 是 全 部 ) 函数 能 被 外 界 访问 。 为 
了 达成 这 个 目的 ， 需 要 利用 IIFE 可 以 传 参 的 特性 。 


8.1.2 ”通过 IIFE 修 改 对 象 


IFE 不 仅仅 擅长 运行 像 Ottergram 项 目 中 的 initiaLizeEvents 那 样 的 初始 代码 ， 它 们 还 能 改 
造作 为 参数 传人 的 对 象 。 为 了 解释 清楚 它 是 怎么 做 到 的 ， 我 们 的 老 朋 友 initiatLizeEvents 又 要 
出 场 了 。 

本 例 中 的 ijnitializeEvents 为 缩 略图 添加 点 击 事件 。 

( 为 了 简要 说 明 ， 移 除了 对 addKeyPressHandtLer 的 调用 。) 


function initiaLizeEvents() { 
"use strict'; 
var thumbnails = getThumbnailsArray(); 
thumbnails.forEach(addThumbClickHandler); 
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} 
initializeEvents(); 


在 这 种 形式 下 ，initializeEvents 通 过 addThumbClickHandler 修 改 一 组 缩 略 图 的 同时 ， 
也 能 通过 实 参 接受 数组 。 首 先 在 定义 函数 时 声明 一 个 形 参 ， 然 后 在 调用 它 时 再 传人 一 个 数组 ， 
如 下 : 


function initializeEvents(thumbnails) { 
"use strict'; 























var thumbnaitls = _ getThumbnaiLsAFFay 人 (地 
thumbnails.forEach(addThumbClickHandler); 
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var thumbnails = getThumbnailsArray(); 
initiaLizeEvents(thumbnaitLs ) ; 


为 了 将 这 串 代 码 编写 成 IFE 模 式 ， 需 要 删除 函数 名 ， 用 括号 包 右 函数 ， 再 添加 一 个 空 括号 用 
于 执行 函数 : 
(function initiatizeEvents(thumbnails) { 
"use strict'; 


thumbnails.forEach(addThumbClickHandler); 
}) (0); 











var thumbnails = getThumbnailsArray(); 
initializeE Cthumbnails); 
不 过 我 们 仍然 需要 将 一 组 缩 略图 作为 实 参 传人 ， 这 时 只 需 移动 一 下 getThumbnaitsArray 即 
可 。 这 样子 ， 我 们 就 能 将 结果 传递 到 IFE 中 : 
(function (thumbnails) { 
"use strict'; 


thumbnails.forEach(addThumbClickHandler); 
}) (getThumbnailsArray()); 





ee i 

在 这 个 版 本 的 代码 中 , 一 个 (通过 调用 getThumbnailsArray 产 生 的 ) 数组 被 传人 到 IIFE 中 。 
IIFE 接 受 这 个 数组 并 标记 为 thumbnails。 在 IIFE 函 数 中 , 数组 中 的 每 个 元 素 都 被 绑 定 了 事件 监听 
器 ( 如 图 8-3 所 示 )。 


太一 忆 


缩 略图 数组 绑 定 了 事件 监听 器 的 缩 略 图 数组 
































图 8-3 IEFE 修 改 其 参数 





我 们 可 以 把 任何 东西 传 进 IIFE 然 后 修改 它 。CoffeeRun 中 的 IIFE 将 会 接受 一 个 window 对 象 。 
但 我 们 并 不 打算 把 模块 代码 直接 放 到 全 局 命名 空间 上 ， 而 是 要 将 它 放 在 全 局 命名 空间 内 的 App 属 


性 上 。CoffeeRun 里 的 每 个 模块 都 有 自己 的 文件 , 并 且 通 过 独立 的 <script> 标 签 引 入 。 图 8-4 展 示 
了 这 个 过 程 。 
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window 





App 


DataStore 
<script src="scripts/datastore.js"> </script>--- 通 过 IIFE 添 加 DataStore--1------|--------- | 
<script src="scripts/truck.js"> </script>-------- 通过 IIFE 添 加 Truck----4------1--------- 


图 8-4 ”使 用 <script> 标 签 引 入 代码 并 修改 window.App 属 性 





























8.2 ”搭建 我 们 的 CoffeeRun 吧 


理论 知识 已 经 够 多 了 , 下面 开 始 动手 干 活 吧 。 因 为 这 是 一 个 新 项 目 ， 所 以 要 在 新 目录 下 打开 
它 : 打开 Atom 编 辑 髓 ， 选 择 File 一 Add Project Folder， 再 选择 font-env-dev-book 目 录 ， 然 后 点 击 
New Folder， 将 其 命名 为 coffeerun 青 点 击 Open。 

接 下 来 ,在 Atom 的 导航 栏 上 按 下 Control 键 ,同时 右 击 coffeerun 文 件 来， 选择 New File 并 将 其 
命名 为 index.html。 再 次 按 下 Control 键 ， 同 时 右 击 coffeerun， 然 后 新 建 一 个 名 为 scripts 的 文件 夹 。 

现在 的 front-env-dev-book 文 件 夹 中 应 该 有 ottergram 和 coffeerun 这 两 个 结构 相似 的 文件 夹 ， 它 
们 分 别 对 应 两 个 项 目 ( 如 图 8-5 所 示 )。 


和 上 由 四 (front-end-dev-book 
8 items, 215.56 GB available 


























Name i Kind 


v | coffeerun Folder 
® index.html HTML text 

* Ml scripts Folder 

7 Ml ottergram Folder 

» 天 img Folder 
® index.html HTML text 

* 天 scripts Folder 

» | stylesheets Folder 





图 8-5 ”为 CoffeeRun 创 建文 件 夹 和 文件 


如 果 你 已 经 打开 了 终端 并 且 正 在 运行 browser-sync， 请 按 下 Control+ C 停 止 运 行 ; 如 果 没 有 的 
话 ， 请 打开 一 个 新 的 终端 窗口 。 无 论 使 用 哪 种 方式 ， 将 路 径 切 换 到 coffeerun 文 件 夹 (如 果 不 记 得 











怎么 做 了 可 以 翻阅 第 1 章 )， 然 后 再 次 启动 browser-sync。 提 醒 一 下 ， 启 动 命令 是 browser-sync 
start --server -- files "stylesheets/*.css, scripts/*.js, *.html"。 


在 index.html 中 添加 一 些 基 本 代码 。( 记 住 , Atom 的 自动 补 全 功能 可 以 节省 大 量 的 工作 , 只 要 
输入 html 即 可 。 ) 
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<!doctype htmL> 
<htmL> 
<head> 
<meta charset="utf-8"> 
<title>coffeerun</title> 
</head> 
<body> 


</body> 
</htmL> 


终于 要 编写 第 一 个 模块 了 ! 


8.3 创建 数据 存储 模块 


我 们 编写 的 第 一 个 模块 将 用 于 将 咖啡 订单 存储 到 数据 库 中 。 每 个 订单 都 会 存储 用 户 的 邮箱 地 
址 。 在 刚 开始 的 时 候 ， 只 需要 记录 订单 的 文字 描述 即 可 ， 例 如 “四 倍 浓缩 咖啡 ”( 如 图 8-6 所 示 )。 


























邮箱 地 址 订单 
caquino@bignerdranch.cow 四 倍 浓 缩 咖 啡 
tgandee@bignerdranch.com 黑 咖啡 
jreece@bignerdranch.com 咖啡 果 昔 





图 8-6 CoffeeRun 数 据 库 的 初始 数据 


稍 后 还 要 记录 每 杯 咖 啡 的 杯 型 、 口 味 和 咖啡 因 浓度 。 客户 的 邮箱 地 址 会 成 为 每 张 订 单 的 独立 标 
记 ， 因 此 每 个 订单 都 会 与 一 个 邮箱 地 址 关联 。( 对 不 起 ,为 了 防止 上 交 ， 每 位 顾客 只 能 下 一 次 单 ! ) 

创建 一 个 名 为 scripts/datastore.js 的 新 文件 。 接 下 来 , 在 index.html 上 添加 相应 的 <script> 标 签 
引入 新 文件 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>coffeerun</title> 
</head> 
<body> 
<script src="scripts/datastore.js" charset="utf-8"></script> 
</body> 
</html> 


保存 index.html， 在 scripts/datastore.js 中 用 基本 的 IIFE 模 式 编 写 模块 。 


(function (window) { 
"use strict'; 
// 放置 要 运行 的 代码 
}) (window); 
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模块 的 架构 现 已 准备 完毕 ， 也 有 对 应 的 <script> 标 签 ， 是 时 候 将 它 添加 到 应 用 的 命名 空间 
人 


8.4 在 命名 空间 上 添加 一 个 模块 


许多 编程 语言 都 有 特定 的 语法 用 于 建立 和 组 织 模块 ， 然 而 ES5 是 个 例外 。 因 此 ， 需 要 使 用 对 
象 来 构建 类 似 的 结构 。 

对 象 能 将 任意 数据 和 键 名 关联 到 一 起 ,而 这 正 是 我 们 组 织 模块 的 方式 。 具体 来 说 , 我 们 会 用 
一 个 对 象 来 作为 CoffeeRun 的 命名 空间 ， 这 个 命名 空间 是 各 个 模块 注册 的 地 方 ， 这 样 它们 便 可 以 
被 其 他 应 用 代码 所 调用 。 

利用 IIFE 来 建立 命名 空间 需要 3 步 。 

(1) 如 果 命 名 空间 已 经 存在 ， 获 取 它 的 引用 。 

(2) 创建 模块 代码 。 

(3) 将 模块 代码 绑 定 到 命名 空间 上 。 

来 看 看 现实 中 是 怎么 样 的 。 将 datastore.js 中 的 IIFE 部 分 改 为 下 面 的 代码 ， 稍 后 将 解释 为 什么 
要 这 么 做 。 

(function (window) { 

"use Strict '， 












































/放置 要 运行 的 代码 
var App = window.App || {}; 


function DataStore() { 
console.log('running the DataStore function'); 


} 


App.DataStore = DataStore; 
window.App = App; 
}) (window) ; 


在 IFE 中 声明 一 个 本 地 变量 App。 如 果 在 window 上 存在 App 属 性 , 那么 就 将 它 赋值 到 本 地 App 
中 ; 否则 引用 一 个 用 {} 表 示 的 新 的 空 对 象 。| | 是 默认 运算 符 ， 被 称 作 逻辑 或 运算 符 , 它 可 以 在 第 
一 个 选项 (window.App ) 尚未 创建 时 提供 一 个 有 效 值 (在 本 例 中 是 {} )。 

我 们 接 下 来 编写 的 每 一 个 模块 都 会 做 相似 的 检验 ,就 好 比 “无 论 谁 是 第 一 个 , 创建 一 个 新 对 
象 让 其 余人 使 用 ”。 

下 一 步 ， 声 明 一 个 名 为 DataStore 的 函数 。 我 们 马上 就 会 为 这 个 函数 添加 代码 。 

最 后 ， 将 DataStore 绑 定 到 App 对 象 上 ， 然 后 将 新 修改 的 App 赋 值 到 全 局 App 属 性 上 。( 如 果 
App 对 象 不 存在 ， 就 必须 要 新 建 一 个 空 对 象 并 绑 定 到 全 局 )。 

保存 文件 ， 切 换 到 浏览 器 。 打 开 开发 者 工具 ， 点 击 Console 选 项 卡 ， 输 入 以 下 代码 调用 
DataStore 函 数 : 

App.DataStore(); 
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DataStore 就 会 被 执行 并 且 在 控制 台 输 出 以 下 信息 ( 如 图 8-7 所 示 )。 


©0@ ， 口 cofeern 


C= CG [localhost:3000/# 


-es 


x | he 





[Ee sl Elements Console Sources Network Timeline Profiles Resources Security » 





© 本 top Y Preservelog 


> App.DataStore(); 
running the DataStore function datastore,js:8 
Undefined 


5 





图 8-7 运行 App .DataStore 函 数 





注意 ， 不 需要 输入 window.App.Datastore();， 因 为 window 对 象 就 是 全 局 命名 空间 ， 它 的 
所 有 属性 我 们 都 可 以 直接 输入 ， 包 括 在 控制 台 里 。 


8.5 构造 函数 


通过 IFE , 我 们 可 以 利用 函数 作用 域 为 大 段 代码 创建 命名 空间 。 还 有 另外 一 种 函数 编写 方式 ， 
它 就 像 工厂 一 样 ， 生 产 出 拥有 类 似 属 性 和 方法 的 对 象 。 其 他 语言 可 能 会 使 用 类 构建 相似 的 结构 ， 
但 严格 来 说 JavaScript 并 没有 类 的 概念 ， 不 过 它 允 许 我 们 自 定义 类 型 。 

我 们 已 经 创建 了 DateStore 类 型 ， 现 在 要 分 两 步 定 制 它 。 第 1 步 ， 定 义 用 于 内 部 存储 数据 的 
属性 ; 第 2 步 ， 提 供 一 系列 与 该 数据 交互 的 方法 。 我 们 不 需要 给 其 他 对 象 直接 访问 该 数据 的 权利 ， 
因为 我 们 会 提供 相应 的 外 部 接口 。 

在 JavaScript 中 ， 工 厂 模 式 的 函数 被 称 为 构造 函数 。 

为 datastore.js 中 的 DataSto re 函数 添加 以 下 代码 。 


(function (window) { 
"use strict'; 
var App = window.App || {}; 



































function DataStore() { 
console.log('running the DataStore function'); 
this.data = {}; 

} 


App.DataStore = DataStore; 
window.App = App; 
}) (window) ; 
构造 函数 的 任务 就 是 创建 和 定制 一 个 新 的 对 象 。 在 构造 函数 的 内 部 , 通过 this 关 键 字 调用 这 
个 新 对 象 。 同 时 ， 可 以 通过 点 运算 符 为 新 对 象 创建 一 个 data 属 性 ， 并 且 分 配给 它 一 个 空 对 象 。 
你 可 能 会 注意 到 , DataStore 的 首 字母 大 写 了 , 这 是 JavaScript 中 约定 的 构造 函数 的 命名 方式 。 
虽然 不 是 必须 的 ， 但 这 是 一 种 很 好 的 做 法 ， 因 为 它 能 告知 其 他 开发 者 这 是 一 个 构造 函数 。 






































8.5 ”构造 函 


数 155 
































要 区 分 构造 函数 和 普通 函数 ， 可 以 观察 它 在 被 油 用 时 有 否 使 用 了 new 关键 字 。 new 会 告 
JavaScript 创 建 一 个 新 对 象 ， 将 this 指 向 新 对 象 ， 然 后 隐 式 返回 该 对 象 。 这 意味 着 即便 不 在 构造 
函数 中 使 用 return 语 句 ， 它 也 依然 可 以 “returmn ”一 个 对 象 。 

保存 文件 ， 然 后 切换 到 控制 台 。 为 了 学 会 如 何 使 用 构造 函数 ,我 们 将 会 创建 两 个 DataStore 
对 象 (又 被 称 作 实例 )， 再 为 它们 添加 数据 。 编写 代码 如 下 : 

var dsone = new App.DataStore(); 

var dsTwo = new App.DataStore(); 

可 以 通过 调用 DataStore 构 造 函 数 来 创建 DataStore 实 例 。 这 时 它们 都 有 一 个 空 的 data 属 
性 ， 我 们 给 它们 添加 一 些 数据 。 

dsOne.data['email'] = 'james@bond.com'; 

dsone.data['order'] = 'black coffee'; 

dsTwo.data['email'] = 'moneypennyGQbond .com '; 

dsTwo.data['order'] = 'chai tea '; 

然后 查看 这 些 数值 : 

dsOne. data; 

dsTwo. data; 

由 结果 可 知 ， 每 个 实例 都 保存 了 不 同 的 信息 〈 如 图 8-8 所 示 )。 

©® ， 口 coffeerun x \, = 
对 C | localhost:3000/# 六 | 三 
[x 加 | Elements Console Sources Network Timeline Profiles ” Resources Security » 2 
© 是 top v Preservelog 
> var dsOne = new App.DataStore(); 
var dsTwo = new App.DataStore(); 
running the DataStore function datastore.js:8 
running the DataStore function datastore.js:8 
undefined 
> dsOne.data['email’'] = 'james@bond.com’; 
dsOne.data['order'] = 'black coffee'; 
dsTwo.data['email'] = 'moneypenny@bond. com'; 
dsTwo.data['order'] = ‘chai tea'; 
"chai tea" 
> dsOne.data; 
Object femail: "james@bond.com", order: "black coffee"} 
> dsTwo.data; 
Object femail: "moneypenny@bond.com", order: "chai tea"} 
图 8-8 ”使 用 DataStore 构 造 函 数 创建 的 实例 保存 数据 
8.5.1 ”构造 函数 的 原型 








使 用 DataStore 实 例 可 以 手动 存储 和 提取 数据 。 但 通过 这 种 方式 ，DataSto re 只 是 创建 了 一 


个 对 象 ， 而 其 余 希 望 使 用 DataStore 实 例 的 模块 只 能 直接 操作 DataStore 的 data 属 性 。 
这 不 是 一 种 好 的 设计 。 更 好 的 方式 是 由 DataStore 提 供 


公共 接口 ， 同 时 这 些 接口 的 


运行 方式 不 被 外 界 探知 。 





一 系列 用 于 添加 、 删 除 和 检索 数据 的 
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所 以 , 创建 自 定义 Datastore 类 型 的 第 二 步 就 是 提供 一 个 用 于 与 数据 交互 的 方法 , 这些 方 法 
是 其 他 组 件 和 DataStore 实 例 交 互 的 方式 。 要 达到 这 个 目的 , 需要 使 用 一 个 强大 的 JavaScript 函 数 
特征 : 原型 属性 。 

函数 在 JavaScript 中 也 同样 是 对 象 ， 这 意味 着 他 们 有 属性 。 在 JavaScript 中 ， 所 有 通过 构造 子 
数 创建 的 实例 都 可 以 访问 其 属性 和 方法 的 共享 仓库 : 构造 函数 的 prototype 属 性 。 

要 创建 实例 ， 需 要 使 用 new 关 键 字 调用 构造 函数 。new 关 键 字 不 仅仅 创建 并 返回 实例 ， 还 在 
实例 和 构造 函数 的 prototype 属 性 间 建 立 了 一 个 特别 的 链接 。 只 要 是 使 用 new 关 键 字 调用 构造 函 
数 创建 的 实例 就 会 有 这 个 链接 。 

当 我 们 为 prototype 添 加 了 一 个 函数 作为 属性 后 , 每 个 通过 这 个 构造 函数 创建 的 实例 都 可 以 
访问 这 个 函数 。 可 以 在 函数 内 部 使 用 this 关 键 字 ， 它 会 指向 当前 实例 。 

为 了 进一步 探究 它 的 效果 ， 在 datastore.js 中 的 原型 上 添加 add 孔 数 。 这 时 候 可 以 把 
console.10g 删 除 。 


(function (window) { 
"use strict'; 
var App = window.App || {}; 




























































































function DataStore() { 


this.data = {}; 
} 


DataStore.prototype.add = function (key, val) { 
this.data[key] = val; 
}; 


App.DataStore = DataStore.; 
window.App = App; 
}) (window); 


在 上 述 代码 中 ， 我 们 为 DataStore.prototype 添 加 了 add 属 性 ， 并 赋值 为 一 个 函数 。 这 个 郴 
数 接受 两 个 参数 : key 和 vaL。 在 函数 的 内 部 , 我 们 使 用 这 两 个 参数 来 修改 当前 实例 的 data 属 性 。 

那么 DataStore 怎 么 存储 咖啡 订单 呢 ?” 它 会 通过 用 户 的 邮箱 地 址 ( key 痢 储 订单 信息 ( val )。 

DataStore 足 以 支撑 CoffeeRun 的 正常 运行 ， 所 以 不 需要 创建 一 个 真正 的 数据 库 。 它 可 以 通 
过 独立 的 标识 符 key 存 储 信 息 val。 因 为 使 用 De 所 以 每 个 key 都 可 以 被 视 为 数据 库 
中 的 唯一 条 目 。( 在 JavaScript 对 象 中 ， 属 性 名 总 是 唯 ， 就 像 全 局 命名 空间 中 的 函数 名 一 样 。 
如 果 尝试 用 相同 的 键 名 存储 不 同 的 数值， 被 覆盖 。 

JavaScript 对 象 的 这 个 特性 满足 了 所 有 数据 库 的 一 大 需求 : 保持 单独 的 数据 片段 。 

保存 代码 , 切换 到 浏览 器 , 在 控制 台中 创建 一 个 DataSstore 实 例 , 再 通过 add 方 法 存储 一 些 信 息 。 


var ds = new App.DataStore(); 
ds.add('email', 'qGbond.com') ， 
ds.add('order', 'triple espresso'); 
ds.data; 
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查看 data 属 性 ， 确 认 它 们 是 否 生效 ( 如 图 8-9 所 示 )。 
oo [DD coffeerun x \ 2 
所 名 | | localhost:3000/# 六 | 三 
[x 串 Elements Console Sources Network Timeline Profiles Resources Security » x 
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> var ds = new App.DataStore(); 
ds.add('email', 'q@bond,com'); 
ds.add('order', 'triple espresso'); 
ds.data; 
Object {email: "gqg@bond.com", order: "triple espresso"} 














图 8-9 ”调用 一 个 原型 方法 











8.5.2 为 构造 函 小 数 添 加 方法 


接 下 来 ， 创 建 读 取 数据 的 方法 。 在 datastorejs 中 添加 一 个 用 于 查询 某 个 特定 键 名 的 对 应 键 值 
的 方法 和 一 个 查询 所 有 的 键 值 对 的 方法 。 











DataStore.prototype.add = function (key, val) { 
this.data[key] = val; 
}; 


DataStore.prototype.get = function (key) { 
return this.data[key]; 
}; 





DataStore.prototype.getAll = function () { 
return this.data; 
}; 


App.DataStore = Data9tore; 
window.App = App; 
}) (window); 


我 们 创建 了 一 个 get 方 法 ， 该 方法 接受 参数 key， 并 在 相应 实例 的 data 属 性 中 查找 键 值 。 同 
时 ， 我 们 还 创建 了 一 个 getAll 方 法 。 尽 管 和 get 看 起 来 很 像 ， 但 getall 会 直接 返回 data 属 性 的 
的 引用 。 

现在 可 以 通过 DataStore 实 例 添加 和 检索 数据 了 。 为 了 保持 逻辑 链 的 完整 性 ,我 们 还 需要 添 
加 一 个 删除 信息 的 方法 。 现 在 就 动手 吧 ! 




















DataStore.prototype.getAll = function () { 
return this.data; 
}; 


DataStore.prototype.remove = function (key) { 
delete this.data[key]; 
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}; 


App .Da 
window 


taStore = DataStore; 
.App = App; 


}) (window) ; 


当 调 用 remove 方 法 时 ，delete 运 算 符 会 将 一 个 键 值 对 从 对 象 上 删除 。 
至 此 为 止 ， 我们 已 经 完成 了 CoffeeRun 中 最 重要 的 模块 DataStore， 它 可 以 存储 数据 、 根 据 





查询 需求 提供 


相应 的 数据 ， 并 且 按 照 指令 删除 不 必要 的 数据 。 








要 查看 方法 的 效果 ， 先 保存 代码 ， 然 后 在 browser-sync 重 新 加 载 页 面 后 切换 到 控制 台 。 接 着 
输入 以 下 代码 ， 它 们 可 以 测试 DataStore 中 的 方法 。 








var ds = new App.DataStore(); 

ds.add('m@bond.com', 'tea'); 

ds.add('james@bond.com', 'eshpressho'); 

ds.getAll(); 

ds.remove('james@bond.com'); 

ds.getAll(); 

ds.get('m@bond.com'); 

ds.get('james@bond.com'); 

如 图 8-10 所 示 ，DataStore 实 例 现 在 能 正常 工作 了 。 这 些 方法 正 是 其 他 模块 与 应 用 数据 库 进 
行 交 互 的 方法 。 


下 一 个 模块 会 使 用 相同 的 架构 


提供 和 DataS 


[x 口 Elements Console Sources Network Timeline Profiles Resources » EK 
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var ds = new App.DataStore(); 
undefined 
》 ds.add('m@bond.com', 'tea'); 
undefined 
>» ds.add('james@bond.com', 'eshpressho'); 
undefined 
ds.getAll(); 
Object {mebond.com: "tea", james@bond.com: "eshpressho"} 
》 ds. remove( 'james@bond. com'); 
undefined 
ds.getAll(); 
Object {mebond.com: "tea"} 
》 ds.get('m@bond. com'); 
"tea” 
> ds.get('jamesGebond.com'); 
undefined 
> | 


图 8-10 ”使 用 原型 上 的 方法 与 DataSstore 交 流 


一 个 接受 参数 并 且 修 改 其 命名 空间 的 IEE 一 一 但 是 它 会 














tore 完 全 不 一 样 的 功能 。 
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8.6 创建 Truck 模块 


接 下 来 要 编写 的 是 Truck 模块 ， 它 负责 提供 用 于 管理 美食 车 的 功能 ， 比 如 创建 、 交 付 订 单 ， 
打印 等 待 中 的 订单 列表 。 图 8-11 展 示 了 Truck 模块 如 何 与 DataStore 模 块 协作 。 


























DataStore 





add < createOrder 





remove deliverOrder 


printOrders 





图 8-11 Truck 模块 和 DataStore 模 块 进行 交互 


当 Truck 实 例 被 创建 后 ， 它 会 被 赋予 一 个 DataStore 对 象 。Truck 对 象 拥有 操作 咖啡 订单 的 
功能 , 但 是 它 不 应 该 负责 订单 的 存储 和 管理 ,而 只 需要 将 这 些 任 务 交 给 DataStore 对 象 来 完成 就 
可 以 了 。 例如 ， 当 调用 Truck 的 create0rder 方 法 时 ， 它 只 是 调用 DataStore 的 add 方 法 。 

创建 scripts/truck.js 文 件 并 且 在 index.html 中 添加 一 个 <script> 标 签 。 


<!doctype html> 
<head> 


<meta charset="utf-8"> 
<title>coffeerun</title> 
</head> 
<body> 
<script src="scripts/datastore.js" charset="utf-8"></script> 
<script src="scripts/truck.js" charset="utf-8"></script> 
</body> 
</html> 


保存 index.html 文 件 。 在 truck.js 中 使 用 IFE 和 构造 函数 建立 一 个 Truck 类 型 。 


(function (window) { 
"use strict'; 
var App = window.App || {}; 








function Truck() { 
} 


App.Truck = Truck; 
window.App = App; 


}) (window); 
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接 下 来 要 为 构造 函数 添加 参数 ， 这 样 才 可 以 让 每 一 个 实例 拥有 独立 的 标识 符 和 相应 的 
DataStore 实 例 。 标 识 符 是 用 于 区 别 不 同 Truck 的 名 字 。DataStore 实 例 在 此 时 会 扮演 一 个 重要 
角色 。 

在 truck.js 中 添加 一 个 新 参数 。 


(function (window) { 
"use strict'; 
var App = window.App || {0}; 


function Truck(truckId, db) { 
this.truckId = truckId; 
this.db = db; 

} 


App.Truck = Truck; 
window.App = App; 


}) (window) ; 

我 们 声明 了 truckId 和 db 这 两 个 参数 ， 然 后 将 它们 作为 属性 分 别 分 配给 新 建 的 实例 。 

下 一 步 会 为 Truck 实例 添加 管理 咖啡 订单 的 方法 。 订 单数 据 包括 一 个 邮箱 地 址 和 一 个 饮品 的 
文字 描述 。 























8.6.1 添加 订单 


第 一 个 要 添加 的 方法 是 create0rder。 当 这 个 方法 被 调用 后 ，Truck 实 例 将 通过 先前 声明 的 
DataStore 实 例 的 方法 和 db 属性 交互 。 具 体 来 说 ， 就 是 调用 DataStore 的 add 方 法 来 存储 咖啡 订 
单 ， 并 且 使 用 邮箱 地 址 来 关联 订单 。 

在 truck.js 中 声明 新 属性 。 



































function Truck(truckId, db) { 
this.truckId = truckId; 
this.db = db; 

} 


Truck.prototype.createOrder = function (order) { 
console.log('Adding order for ' + order.emailAddress); 
this.db.add(order.emailAddress, order); 


}; 


App.Truck = Truck; 
window.App = App; 


}) (window); 
在 create0rder 函 数 中 输出 消息 到 控制 台 ， 然 后 使 用 db 属性 的 add 方 法 来 存储 订单 信息 。 
调用 add 方 法 十 分 简单 ， 只 需要 指向 Truck 的 db 实例 ,然后 调用 它 的 add 方 法 即 可 。 无 须 在 这 
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个 文件 里 指定 App .DataStore 的 命名 空间 或 者 在 模块 内 提起 DataStore 的 构造 函数 。 只 要 一 个 对 
象 拥 有 和 Datastore 相 同 的 方法 ， 它 就 可 以 被 Truck 使 用 ， 而 Truck 并 不 关心 它们 是 怎么 实现 的 。 
保存 文件 ， 然 后 在 控制 台 输 入 以 下 条 目 来 测试 create0rder 方 法 : 


var myTruck = new App.Truck('007', new App.DataStore()); 

myTruck.createOrder({ emailAddress: 'dr@no.com', coffee: 'decaf'}); 
myTruck.createOrder({ emailAddress: 'me@goldfinger.com', coffee: 'double mocha'}); 
myTruck.createOrder({ emailAddress: 'm@bond.com', coffee: 'earl grey'}); 
myTruck.db; 


得 到 的 结果 应 该 和 图 8-12 相 似 。 





eoe D CoffeeRun x 





< GD localhost:3000 六 





x | be 


[9 口 Elements Console Sources Network Timeline Profiles Resources Security Audits 


OFiop Preserve log 


》 var myTruck = new App.Truck('087', new App.DataStore()); 
undefined 
» myTruck.createOrder({ emailAddress: 'dr@no.com', coffee: 'decaf'}); 
Adding order for dr@no.com truck.js:13 
Undefined 
》 myTruck.createOrder({ emailAddress: 'meGgoLdfinger.com'，coffee: 'double mocha'}); 
Adding order for me@goldfinger.com truck.js:13 
Undefined 
myTruck.createOrder({ emailAddress: 'm@bond.com', coffee: 'earl grey'}); 
Adding order for m@bond.com truck.is:13 
undefined 
myTruck.db; 
TData5tore {data: Object} 四 
vdata: Object 
vdr@no.com: Object 
coffee: "decaf™" 
emailAddress: "dr@no.com" 
pb_proto_: Object 
mebond.com: Object 
bme@goldfinger. com: Object 
Pp_proto_: 0bject 
Pp__proto_: Object 





图 8-12 ”测试 Truck.prototype.create0rder 


当 控 制 台 输出 myTruck.db 的 值 时 ， 点 击 P 图 标 来 查看 艇 套 的 属性 ( 如 data 对 象 里 的 
dr@no.com 属 性 )。 


8.6.2 ”删除 订单 


当 订 单 交付 后 ，Truck 应 该 从 数据 库 中 删除 相应 的 订单 ， 所 以 需要 为 truck.js 的 Truck. 
prototype 对 象 添加 deliver0rder 方 法 。 








Truck.prototype.createOrder = function (order) { 
console.log('Adding order for ' + data.emailAddress); 
this.db.add(data.emailAddress, order); 

}; 


Truck.prototype.deliverOrder = function (customerId) { 
console.log('Delivering order for ' + customerId); 
this.db.remove(customerId); 
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}; 


App.Truck = Truck; 
window.App = App; 


}) (window) ; 


我 们 赋予 Truck.prototype.deLiver0rder 一 个 函数 表达 式 。 这 个 函数 接受 一 个 customerId 
参数 ， 随 后 它 会 被 传递 给 this.db.remove， 它 的 值 应 该 是 一 个 与 订单 关联 的 邮箱 地 址 。 
和 create0rder 一 样 ，deLiverorder 也 只 调用 this,db 的 remove 方 法 ， 而 无 须知 道 remove 


方法 如 何 运行 。 
保存 文件 ， 切 换 到 控制 台 。 








上 建 一 个 Truck 实例 ， 通 过 create0rder 方 法 添加 一 些 订单 ， 接 


着 检测 deLiverorder 是 否 成 功 删 除 订 单 。( 你 可 以 在 调用 create0rder 和 detLiverorder 函 数 后 


敲 击 回 车 键 或 者 使 用 Shift + Enter， 但 是 要 记得 在 每 个 myTruck. db 语句 后 敲 击 回 车 锁 

















1 





。) 


var myTruck = new App.Truck('007', new App.DataStore()); 

myTruck.createOrder({ emailAddress: 'm@bond.com', coffee: 'earl grey'}); 
myTruck.createOrder({ emailAddress: 'dr@no.com', coffee: 'decaf'}); 
myTruck.createOrder({ emailAddress: 'me@goldfinger.com', coffee: 'double mocha'}); 


myTruck.db; 


myTruck.deliverOrder('m@bond.com'); 
myTruck.deliverOrder('dr@no.com’'); 


myTruck.db; 


输入 以 上 指令 后 ，myTruck.db 的 订单 会 在 调用 deliver0rder 后 发 生 改 变 ( 如 图 8-13 所 示 )。 





ea@e [DD CoffeeRun 











= C | localhost:3000 





民 | Elements Console Sources Network Timeline Profiles Resources Security Audits 


X | 川 he 


Otop Preserve log 


UnoeTInedg 


myTruck.create0rder({ emailAddress: 'dr@no.com', coffee: 'decaf'}); 


Adding order for dr@no.com truck,. js:13 


undefined 


myTruck.createOrder({ emailAddress: 'me@goldfinger.com', coffee: 'double mocha'}); 


Adding order for me@goldfinger.com truck,js:13 
Undefined 
myTruck.db; 


wDataSstore {data: Object} 


vdata: Object 


kb dr@no.com: Object 


b mebond. com: Object 
bb me@goldfinger.com: Object 


Pp_proto_: Object 
pb_proto_: Object 


myTruck.deliverOrder( 'm@bond. com' ); 


Delivering order for m@bond.com truck,.is:18 


undefined 


myTruck.deliverOrder( 'dr@no. com'); 


Delivering order for dr@no.com truck.js:18 
Undefined 
myTruck.db; 


WDataStore {data: Object} 


vdata: Object 


bme@goldfinger.com: Object 


pb_proto_: Object 
Pp_proto_: Object 





图 8-13 ”通过 Truck.prototype.deLiverorder 删 除 订单 数据 
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注意 ， 控 制 台 会 在 你 点 击 P 图标 时 展示 数据 。 如 果 你 直到 执行 完 所 有 deliver0rder 隐 数 后 
才 查 看 myTruck.db， 就 会 发 现 数据 好 像 没 有 被 添加 过 一 样 ( 如 图 8-14 所 示 )。 


[x 日 ] Elements Console Sources Network Timeline Profiles Resources Security Audits ; Xx 
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> var myTruck = new App.Truck('007', new App.DataStore()); 





undefined 
> myTruck.createOrder({ emailAddress: ‘'m@bond.com', coffee: 'earl grey'}); 
Adding order for m@bond.com truck.js:13 
undefined 
》 myTruck.createOrder({ emailAddress: 'dr@no.com', coffee: ‘decaf'}); 
控制 台 中 展示 的 并 不 是 Adding order for dr@no.com truck. js:13 
消息 打印 时 的 数据 ， 而 “undefined = 
是 你 点 击 箭头 图 标 那 一 > je Cs me@goldfinger,. com', coffee: 'double mocha'}); 
Adding order for me@goldfinger, com truck,.js:13 
刻 的 数据 。 


undefined 
Sr 
wDatastore {data: Object} 


vdata: Object 
bme@goldfinger. com: Object 
pb__proto_ : Object 
Pp_proto_: Object 
» myTruck.deliverOrder( 'm@bond,. com'); 


Delivering order for m@bond.com truck.js:18 
Undefined 

» myTruck.deliverOrder('dr@no.com'); 
Delivering order for dr@no.com truck.js:18 
Undefined 

》 myTruck.db; 


上 DataStore {data: Object} 


图 8-14 ”通过 点 击 箭头 图 标 展示 数据 


8.7 调试 


最 后 一 个 要 加 到 Truck.prototype 对 象 上 的 方法 是 print0rders。 这 个 方法 接受 一 个 由 客户 
邮箱 地 址 组 成 的 数组 ， 遍 历数 组 ， 然 后 使 用 consote.Log 打 印 出 订单 信息 。 

这 个 方法 的 代码 和 之 前 写 过 的 函数 和 方法 非常 相像 。 不 过 它 会 带 来 一 个 bug， 通 过 Chrome 的 
调试 工具 可 以 揪 出 它 。 

不 用 着 急 , 一 步 一 步 来 。 首 先 在 truck.js 中 添加 一 个 printorders 的 基本 版 本 。 在 函数 中 通过 
db 对 象 获取 所 有 的 咖啡 订单 , 然后 使 用 Object , keys 方 法 来 获取 一 个 包含 所 有 订单 的 邮箱 地 址 的 
数组 ， 最 后 遍历 这 个 数组 ， 为 数组 里 的 每 个 函数 调用 一 次 回调 函数 。 

















Truck.prototype.deliverOrder = function (customerId) { 
console.log('Delivering order for ' + CustomerId ) ; 
this.db.remove(customerId); 

}; 


Truck.prototype.printOrders = function () { 
var customerIdArray = 0bject.keys(this.db.getALL() ); 
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consoLe.Log('Truck #' + this.truckId + ' has pending orders:'); 
customerIdArray.forEach(function (id) { 
console.1log(this.db.get(id)); 
}); 
}; 


App.Truck = Truck; 
window.App = App; 


}) (window) ; 


在 新 的 print0rders 方 法 中 调用 this.db.getALL 来 获取 所 有 订单 的 键 值 对 ， 然 后 将 它们 传人 
0bject.keys， 从 而 获得 一 个 仅 包含 键 名 的 数组 ， 再 将 这 个 数组 赋值 给 变量 customerIdArray。 

在 遍历 这 个 数组 时 ,将 一 个 回调 函数 传 给 forEach。 在 回调 函数 内 ， 尝 试 通过 一 个 id ( 客户 
的 邮箱 地 址 ) 来 获取 订单 信息 。 

保存 文件 ， 再 回 到 控制 台 。 创 建 一 个 Truck 实 例 ， 然 后 添加 一 些 咖啡 订单 ， 尝 试 使 用 新 的 
printOrders 方 法 。 


var myTruck = new App.Truck('007', new App.DataStore()); 

myTruck.createOrder({ emailAddress: 'm@bond.com', coffee: 'earl grey'}); 
myTruck.createOrder({ emailAddress: 'dr@no.com', coffee: 'decaf'}); 
myTruck.createOrder({ emailAddress: 'me@goldfinger.com', coffee: 'double mocha'}); 
myTruck.printOrders(); 


然而 我 们 并 没有 看 到 一 组 咖啡 订单 ， 反 倒 看 到 了 错误 提示 Uncaught TypeError: Cannot 
read property 'db' of undefined (如 图 8-15 所 示 )。 

















@@@ / [corun x [全 | 


< GC 口 localhost:3000 空 





民 划 Elements Console Sources Network Timeline Profiles Resources Security Audits @1 ; Xx 





Otop Preserve log 


» Var myTruck = new App.Truck('007'，new App.DataStore()); 
undefined 

» myTruck.createOrder({ emailAddress: ‘'m@bond.com', coffee: 'earl grey'}); 
Adding order for m@bond.com truck.js:13 
Undefined 

》 myTruck.createOrder({ emailAddress: 'dr@no.com', coffee: 'decaf'}); 
Adding order for dr@no.com truck.js:13 
Undefined 
myTruck.createOrder({ emailAddress: 'me@goldfinger.com', coffee: 'double mocha'}); 
Adding order for me@goldfinger.com truck.is:13 
undefined 

» myTruck.printOrders(); 


Truck #0607 has pending orders: truck.js:28 
四 *Uncaught TypeError: Cannot read property 'db' of undefined(..) truck.js:30 


> 





图 8-15 ”运行 print0Orders 时 抛 出 的 错误 











这 是 在 编写 JavaScript 时 最 容易 见 到 的 错误 之 一 。 许 多 开发 者 都 为 此 抓 狂 ， 因 为 它 很 难 定位 。 
但 是 只 要 知道 怎么 使 用 调试 工具 ， 就 能 快速 定位 问题 ， 而 这 也 是 接 下 来 我 们 将 要 学 习 的 。 
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8.7.1 使 用 开发 者 工具 定位 bug 


调试 需要 我 们 通过 重 现 错误 定位 问题 ， 而 Chrome 调 试 工具 让 这 个 过 程 变 得 十 分 轻松 。 

当 出 现 一 个 错误 时 ， 控 制 台 会 显示 错误 所 在 的 文件 名 和 行 号 。( 在 图 8-1$ 中 显示 为 
truck.js:30; ， 你 看 到 的 行 号 可 能 略 有 不 同 。) 单 击 该 文本 , 在 调试 工具 中 打开 这 行 讨 大 的 代码 
( 如 图 8-16 所 示 )。 











[x 品 Elements Console Sources Network Timeline Profiles Resources Security Audits @1 : XxX 

Sources Contentscr... Snippets : | 下 datastorejs truck.js x En + + ye 四 I 

7 口 top @ seving from the file system? Add your files into the worksp... more never show X |™ Watch + C 

YC localhost:3000 17| Truck.prototype.deliverOrder = function (customerId) { a Se 
» Ml browser-sync 18 console. log('Delivering order for ' + customerId); Not Paused 
| 19 this.db,. remove(customerId); 
» MM scripts 20 }; TY Scope 
21 
四 Wey 22 Truck.prototype.printOrders = function () { Not Paused 
23 // The orders are stored as key/value pairs 
24 // The key for each order is the customer's email address Y_ Breakpointe 
25 // Get an array of the customer email addresses using 0bject.k No Breakpoints 
26 var customerIdArray = 0bject.keys(this.db.getALL()); 
28 le.log('Truck #" h kId + 'h d d SS 
console. log('Truck #' + this.truc + as pending orders: E 

29 customerIdArray.forEach(function (id) { > XHR Breakpoints 
| "oe" tog(this,dheget ds © # Event Listener Breakpoints 
32| }; ” » Event Listeners C 
33 
34 App.Truck = Truck'; 
35 window.App = App; 
36 }(window)); 
37 
38 





{} Line 30, Column 23 
图 8-16 在 调试 工具 中 查看 错误 8 


现在 查看 的 是 开发 者 工具 的 源码 面板 。 点 击 红色 图 标 来 查看 错误 信息 ( 如 图 8-17 所 示 )。 


// Get an array of the customer email addresses using 0bject.k No Breakpoints 
var customerIdArray = Object.keys(this.db.getAll()); 





console. log('Truck #' + this.| @ Uncaught TypeError: Cannot read property 'db' of undefined 
customerIdArray.forEach (funct Sw 
console. log(this,db.get(id)); Y # Event Listener Breakpoints 


}; # Event Listeners 











图 8-17 在 源码 面板 中 标示 的 错误 行 


这 个 错误 信息 表示 浏览 器 认为 你 要 从 一 个 不 存在 的 对 象 上 读 取 名 为 db 的 属性 。 

下 一 步 是 运行 代码 直到 错误 行 ,然后 检查 该 对 象 的 值 。 在 源码 面板 上 点 击 左边 的 行 号 , 这 样 
就 会 在 调试 器 上 添加 一 个 断 点 ， 告 知 浏览 顺 运 行 到 该 行 时 暂停 。 设 置 断 点 后 ， 行 号 会 变 为 蓝 色 ， 
而 在 右 侧 的 断 点 面板 上 会 出 现 一 个 新 条 目 ( 如 图 8-18 所 示 )。 
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22 Truck.prototype.printorders = function () { Not Paused 
23 // The orders are stored as key/value pairs 
24 // The key for each order is the customer's email address El 
25 // Get an array of the customer email addresses using 0bject.k 曲 回 truckjs:30 
26 var customerIdArray = 0bject.keys(this.db.getALL()); | console. log(this.db.get(id)) 
27 a .db. 沁 
28 console. log('Truck #' + this.truckId + ' has pending orders:')@ » DOM Breakpoints 
29 customerIdArray.forEach(function (id) { = 

医 东 console. log(this,db.get(id)); @ » XHR Breakpoints 十 
E22] ll, ey RS ee < 如 


图 8-18 ”设置 断 点 


按 下 Esc 键 , 调 出 控制 台 (如 图 8-19 所 示 )。 控制 台 也 被 称 作 抽 居 ,我们 可 以 在 查看 源码 面板 
的 同时 ， 使 用 控制 台 进行 交互 。 

















[3 口 Elements Console Sources Network Timeline Profiles Resources Security Audits 四 1 Et 
Sources Contentscr... Snippets :; | 区 datastorejs truckjs x uma + +|iBoOa 
T 口 top @ seving from the file system? Add your files into the worksp... more never show x > Watch + © 
YO localhost:3000 17 Truck.prototype.deliverOrder = function (customerId) { Se 
* Ml browser-sync 18 console. log('Delivering order for ' + customerId); Not Paused 
人 19 this.db. remove(customerId); 
» MM scripts 20 }; Vv Scope 
| (index) 2 
22 Truck.prototype.printOrders = function () { Not Paused 
23 // The orders are stored as key/value pairs 
24 // The key for each order is the customer's email address Y Breakpoints 
25 // Get an array of the customer email addresses using 0bject.k 晶 国 truckjs:30 
26 Var customerIdArray = Object.keys(this.db.getAll()); console. log(this.db.get (id)). 
27 。 .db. 岂 
28 console.log('Truck #' + this.truckId + ' has pending orders:'); |» DOM Breakpoints 
29 customerIdArray.forEach(function (id) { 
console. log(th id)) 四 上 XHR Breakpoints 呈 
31| 、]j); » Event Listener Breakpoints 
{} Line 30, Column 23 * Event Listeners C 
Console x 
© iop v 国 Preservelog 
Adding order for me@goldfinger.com truck.is:13 
undefined 
》 myTruck.printOrders(); 
Truck #007 has pending orders: 上 truck.js:28 
©@ *Uncaught TypeError: Cannot read property 'db' of undefined(..) truck.is:30 


> 


图 8-19 ”展示 控制 台 抽 慑 


在 控制 台中 再 次 运行 hyTruck.print0rders();。 这 时 浏览 器 会 激活 调试 器 ,代码 会 停 在 断 
点 处 ( 如 图 8-20 所 示 )。 




















[< datastorejs truckjs x Ei A? yo 日 
@ serving from the file system? Add your files into the worksp... more never show X \™ Watch + 6 
17 Truck.prototype.deliverOrder = function (customerId) { ais 
18 console. log('Delivering order for ' + customerId); (anonymous function) truck.js:30 
1 Da db remove(customerId); Truck.printOrders truckjs:29 
21 (anonymous function) VM453:1 
22 Truck.prototype.printOrders = function () { 
23 // The orders are stored as key/value pairs 
24 // The key for each order is the customer's email address TY Scope 
ey // Get an array of the customer email addresses using 0bject.k 
26 var customerIdArray = 0bject.keys(this.db.getALL()); YLocal 
27 四 id: "m@bond. com" 
28 console.log('Truck #' + this.truckId + ' has pending orders:'); this: undefined 
29 customerIdArray.forEach(function (id) { id = "mebond.com" ” 
ED nse Lool das Gb attid) i > Global Window 
| 0}}; 了 Breakpoints 
ec 四 tuckjsa 





图 8-20 ”调试 器 暂停 在 断 点 处 
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当 调 试 器 暂停 后 ,我 们 就 有 权限 访问 当时 所 能 获得 的 变量 。 此 时 ,可 以 使 用 控制 台 检 测 变 量 
的 值 ， 从 而 查找 问题 的 蛛丝马迹 。 

我 们 要 通过 执行 错误 行 来 重 现 错误 。 首 先 从 最 里 层 的 括号 开始 , 也 就 是 这 里 的 id 变量 。 当 我 
们 在 控制 台中 输入 它 的 时 候 ， 会 得 到 mebond . com 值 (如 图 8-21 所 示 )。 


<7 




















28 console. log('Truck #' + this.truckId + ' has pending orders:'); 
29 customerIdArray.forEach(function (id) id = "m@bond. com" 

>] 
31 


{} Line 30, Column 7 


; Console 
Oiop Preserve log 
©@ PUncaught TypeError: Cannot read property 'db' of undefined(..) 
》 myTruck.printOrders(); 
Truck #007 has pending orders: 
>》 id 
"m@bond. com" 
> 





图 8-21 检查 最 内 层 的 值 


因为 这 时 并 没有 出 现 错误 , 所 以 继续 尝试 检查 括号 外 的 代码 ,this .db.get (id)。 在 控制 台 
上 执行 代码 ， 代 码 会 出 现 错误 ( 如 图 8-22 所 示 )。 


29 customerIdArray.forEach(function (id) { ‘id = "nebond.com" 
到 了 [thisig [9 
1 ; 


{} Line 30, Column 36 | 








; Console 
© top v Preservelog 
Truck #007 has pending orders: 
>》 id 
"m@bond. com" 
> this.db.get(id) 
四 *Uncaught TypeError: Cannot read property 'db' of undefined(..) 
> 


图 8-22” 重 现 错误 


现在 可 以 进一步 定位 问题 了 。 从 右 侧 开 始 ， 尝 试 删除 部 分 代码 片段 然后 执行 ， 直 到 错误 不 再 
重 现 。 先 输入 this.db.get， 再 输入 this .db。 控 制 台 依旧 报错 ( 如 图 8-23 所 示 )。 


> this.db.get 

四 *Uncaught TypeError: Cannot read property 'db' of undefined(..) 
> this.db 

@ PUncaught TypeError: Cannot read property 'db' of undefined(.…) 


图 8-23 ”继续 搜寻 


最 后 ， 输 入 this， 终 于 没有 错误 抛 出 了 (如 图 8-24 所 示 )。 
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>》 this.db.get 
@ *Uncaught TypeError: Cannot read property 'db' of undefined(..) 
» this.db 
@ PUncaught TypeError: Cannot read property 'db' of undefined(..) 
> this 

undefined 
> 


图 8-24 ”修剪 代码 以 找 出 错误 原因 


为 什么 this 在 回调 函数 内 的 值 是 undefined 呢 ? 因为 this 在 回调 函数 里 并 没有 被 赋值 ， 所 
以 我 们 需要 为 其 赋值 。 

这 个 情形 和 Truck.prototype 方 法 有 点 区 别 。 在 原型 的 方法 中 , this 指 代 Truck 的 实例 。 尽 
管 回 调 函 数 在 Truck.prototype.printorder 中 ， 但 是 它 拥 有 自己 的 this 变 量 。 而 这 个 变量 并 
未 被 赋值 ， 所 以 为 undefined。 

在 修改 代码 前 , 我 们 还 需要 熟悉 一 下 另外 两 种 定位 错误 的 方法 。 如 果 将 鼠标 悬 停 在 源码 面板 
中 的 某 一 部 分 代码 上 ， 调 试 器 会 显示 它们 的 值 一 一 将 鼠标 悬 停 在 this 上 ， 会 看 到 值 undefined 
(如 图 8-25 所 示 )。 











26 var customerIdArray = Object. keys(this.db.getAl1());™ | 
27 
28 console.log('Truck #' + this.truckId + ' has pending orders:'); 
29 customerIdArray.forEach(function (id) { id = "m@bond.com" 
thi 
31 ; 
32 js undefined 
33 








图 8-25 ” 悬 停 鼠标 来 查看 数值 


而 在 右 侧 的 Scope 面 板 中 有 一 个 变量 列表 ， 在 其 中 可 以 看 到 id 和 this，this 的 值 自然 也 是 
undefined ( 如 图 8-26 所 示 )。 





vw Scope 

YLocal 
id: "m@bond. com" 
this: undefined 


Pp Global Window 
图 8-26 ”在 Scope 面 板 上 查看 变量 
点 击 右 上 角 的 蓝 色 WP 按钮 ( 如 图 8-27 所 示 )， 它 会 让 代码 再 次 执行 。 


I As + 个 
图 8-27 调试 器 控制 面板 
最 后 ， 再 次 点 击 蓝 色 行 号 以 移 除 断 点 ( 如 图 8-28 所 示 )。 
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28 console, loc 28 console. log 
29 customerId/ 29 customerIdA 

console.l 38 console.\ 
31 }); 31 $3; 





图 8-28 ”点 击 行 号 ， 移 除 断 点 


现在 去 搞定 那个 麻烦 的 bug 吧 。 
8.7.2 ”使 用 bind 设 置 this 


在 JavaScript 中 ， 函 数 内 的 关键 字 this 会 在 函数 调用 时 被 自动 赋值 。 对 于 构造 函数 和 原型 上 
的 方法 来 说 ， 它 们 的 this 是 相应 对 象 的 实例 。 这 个 实例 被 称 作 函 数 调用 的 所 有 者 ， 而 this 让 我 
们 有 权限 去 访问 所 有 者 的 属性 。 

如 先前 所 说 ， 回 调 函 数 并 没有 将 对 象 自 动 分 配给 this。 你 可 以 使 用 函数 的 bind 方 法 来 指定 
函数 的 所 有 者 。( 记 住 , JavaScript 的 函数 本 质 上 也 是 对 象 , 所 以 它们 拥有 自己 对 应 的 属性 和 方法 ， 
比如 bind。) 

bind 方 法 接受 一 个 对 象 实 参 并 返回 一 个 新 版 本 函数 。 当 调用 这 个 新 版 本 函数 时 , 它 会 在 函数 
内 部 将 对 象 实 参 绑 定 到 this 上 。 

而 在 forEach 的 回调 函数 中 ， 因 为 它 没有 所 有 者 ， 所 以 this 的 值 是 undefined。 可 以 通过 调 
用 bind 函 数 并 且 传人 Truck 实例 进行 修复 。 

在 truck.js 中 调用 bind。 



































Truck.prototype.printOrders = function () { 
var customerIdArray = Object.keys(this.db.getAll()); 


console.log('Truck #' + this.truckId + ' has pending orders:'); 
customerIdArray.forEach(function (id) { 
console.log(this.db.get(id)); 
}.bind(this)); 
}; 





在 forEach 的 回调 函数 外 ，this 指 代 Truck 实 例 。 在 forEach 括 号 内 部 的 匿名 函数 后 马上 调 
用 .bind(this) 方 法 ， 从 而 将 修改 过 的 匿名 函数 传 给 forEach。 这 个 修改 过 的 函数 的 所 有 者 是 
Truck 实 例 。 

保存 并 且 确 认 订 单 是 否 正 确 地 被 打印 。 可 能 需要 重新 声明 myTruck 并 再 次 运行 create0rder。 

输出 应 如 图 8-29 所 示 。 
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©@@ /[ corrun x \ [2| 
€ DC 0 localhost:3000 4 三 
[x 口 Elements Console Sources Network Timeline Profiles Resources Security Audits ; Xx 
Sources Contentscr... Snippets :; | 四 truck) js x En 人 + 个 8 加 
T 口 top 0 Serving from the file system? Add y... more never show X | 上 产 Watch 二 三 心 
YO localhost:3000 26| var customerIdArray = 0bject.keys(this.db.gel Y Call Stack 
要 27 Not Paused 
> Ba browsersync 28 console.log('Truck #' + this.truckId + ' has | bi 
» MM scripts 29 Se Ar rs Looe en (id) { T Scope 
医 I onsole. log(this.db.get(id)); | 
看 tndex 31| 。 },.bind(this)); Not Paused 
j 32 ; F 
kN cdnjs.cloudflare.com 3 } v Breakpoints 
34| App.Truck = Truck; 加 truckjs:30 
{} Line 30, Column 7 console. log(this.db.get(id)). 
Console x 


Oicop Preserve log 
y MyIruck. createUrder(1 emailAddress: ‘me@goldtinger.com’, cotree: "double mocna" yy); 


Adding order for me@goldfinger.com truck.js:13 
Undefined 


》 myTruck.printOrders(); 


Truck #007 has pending orders: truck.is:28 
Object femailAddress: "mebond.com", coffee: "earl grey"} truck.is:30 
Object {emailAddress: "dr@no.com", coffee: "decaf"} truck.is:30 
Object femailAddress: "me@goldfinger.com", coffee: "double mocha"} truck.is:30 
undefined 











图 8-29 使 用 bind(this) 让 printorders 正 常 工作 





8.8 在 页 面 加 载 时 初始 化 CoffeeRun 


现在 DataSstore 和 Truck 模块 都 能 正常 工作 了 。 可 以 通过 控制 台 对 Truck 进行 实例 化 操作 ， 
ee 

现在 我 们 将 创建 一 个 模块 ， 让 它 在 页 面 加 载 时 自动 执行 上 述 步骤。 创建 一 个 scripts/main.js 文 
件 ， 在 index.html 上 添加 对 应 


<!doctype htmL> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>coffeerun</title> 
</head> 
<body> 
<script src="scripts/datastore.js" charset="utf-8"></script> 
<script src="scripts/truck.js" charset="utf-8"></script> 
<script src="scripts/main.js" charset="utf-8"></script> 
</body> 
</html> 


保存 index.html, 然后 在 main.js 上 添加 HFE, 就 像 在 其 他 模块 中 所 做 的 一 样 , 但 是 这 一 次 不 需 
要 为 window.App 添 加 新 属性 。 建 立 main.js 如 下 : 
































8.8 在 页 面 加 载 时 初始 化 CoffeeRun 171 





(function (window) { 

"use strict'; 

var App = window.App; 

var Truck = App.Truck; 

var DataStore = App.DataStore; 
}) (window); 


这 个 模块 会 接受 window 对 象 并 且 在 函数 内 部 使 用 ， 它 同样 会 检索 我 们 在 window .App 命 名 空 
间 下 定义 的 构造 函数 。 
理论 上 来 说 ， 可 以 使 用 完整 的 名 称 ( 如 App.Truck 和 App.DataStore )， 不 过 更 短 的 名 字 会 
增加 代码 的 可 读 性 。 














创建 Truck 实 例 


然后 就 像 刚刚 在 控制 台中 所 做 的 一 样 ， 创 建 一 个 Truck 实例 ,并 且 为 其 提供 一 个 id 和 一 个 新 
的 DataStore 实 例 。 
在 main.js 中 调用 Truck 的 构造 函数 ， 并 传人 id ncc-1701 和 DataStore 实 例 。 


(function (window) { 

"use strict'; 

var App = window.App; 

var Truck = App.Truck 

var DataStore = App.DataStore; 

var myTruck = new Truck('ncc-1701', new DataStore()); 
}) (window); 


这 基本 和 我 们 先前 在 控制 台中 输入 的 代码 一 样 ， 但 是 不 需要 在 Truck 或 者 DataStore 前 使 用 
App 前 级 了 ， 因 为 我 们 已 经 分 别 创建 了 指向 App .Truck 和 App.Datastore 的 本 地 变量 。 

这 时 的 应 用 代码 已 经 基本 完整 了 。 然 而 ， 我 们 还 是 不 能 和 Truck 实例 交互 。 为 什么 呢 ? 因为 
变量 是 在 main 模 块 的 函数 内 部 声明 的 ， 而 函数 外 部 〈 包 括 控制 台 ) 无 法 访问 函数 内 部 的 变量 。 

所 以 ， 为 了 便于 交互 ， 需 要 在 main.js 中 将 Truck 暴露 到 全 局 命名 空间 。 


(function (window) { 
"use Strict ' ， 
var App = window.App; 
var Truck = App.Truck; 
var DataStore = App.DataStore; 
var myTruck = new Truck('ncc-1701', new DataStore()); 
window.myTruck = myTruck; 
}) (window); 


保存 代码 ， 然 后 再 切 至 控制 台 。 手 动 刷新 页 面 ， 确 保 之 前 的 代码 已 经 被 清除 。 
输入 myTruck， 此 时 会 发 现 控 制 台 正在 尝试 进行 自动 补 全 ( 如 图 8-30 所 示 ), 这 意味 着 它 已 经 
发 现 通 过 window 对 象 暴 露 的 myTruck 变 量 了 。 
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[x a Elements Console Sources Network Timeline Profiles Reso! 


i top v 国 Preserve log 


> myrruck 
myTruck 
myTruck.printOrders(); 
myTruck.createOrder({ emailAddress: ‘'me@goldfinger... 
myTruck.createOrder({ emailAddress: 'dr@no.com', CO. 
myTruck.createOrder({ emailAddress: ‘'m@bond.com', C.. 
myTruck. db; 
myTruck.deliverOrder('dr@no. com'); 
myTruck.deliverOrder( 'm@bond. com' ); 


图 8-30 ”控制 台 在 全 局 命名 空间 下 发 现 了 myTruck 


接 下 来 尝试 多 次 调用 myTruck.create0rder， 并 且 传 和 一些 测 斌 数据。 这 时 候 ， 控 制 台 会 
根据 输入 历史 自动 补 全 create0rder 的 调用 语句 ， 这 大 大 减轻 了 你 的 工作 量 ( 如 图 8-31 所 示 )。 








[x 0] Elements Console Sources Network Timeline Profiles Resources Security Audil 


© top v Preserve log 


> myTruck.createOrder({ emailAddress: 'me@goldfinger.com', coffee: 'double mocha'}); 
myTruck 

myTruck.printOrders(); 

myTruck.createOrder({ emailAddress: 'me@goldfinger... 
myTruck.createOrder({ emailAddress: 'dr@no.com', Co.. 
myTruck.createOrder({ emailAddress: 'm@bond.com', C.. 
myTruck.db; 

myTruck.deliverOrder('dr@no. com'); 
myTruck.deliverOrder('m@bond. com'); 


图 8-31 控制 台 利 用 输入 历史 自动 补 全 create0rder 调 用 
也 可 以 输入 以 下 代码 来 进行 测试 。 


myTruck.createOrder({ emailAddress: 'me@goldfinger.com', coffee: 'double mocha'}); 

myTruck.createOrder({ emailAddress: 'dr@no.com', coffee: 'decaf'}); 

myTruck.createOrder({ emailAddress: 'm@bond.com', coffee: 'earl grey'}); 

myTruck.printOrders(); 

myTruck.deliverOrder('dr@no.com'); 

myTruck.deliverOrder('m@bond.com’'); 

myTruck.printOrders(); 

在 执行 了 create0rder 、printorders 和 detLiverorder 方 法 后 ， 可 以 看 到 如 图 8-32 所 示 的 
结果 。 

截 喜 ! 你 已 经 完成 了 CoffeeRun 的 底层 架构 。 它 暂时 还 没有 UI 结 构 ， 不 过 我 们 会 在 下 一 音 
为 其 添加 。 那 时 候 也 无 须 在 核心 代码 上 进行 修改 了 , 因为 UI 层 只 会 调用 Truck.prototype 上 的 
方 和 
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[x 可 Elements Console Sources Network Timeline Profiles Resources Security Audits 
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> myTruck.createOrder({ email: 'me@goldfinger.com', coffee: 'double mocha'}); 
Adding order for me@goldfinger.com 
undefined 

》 myTruck.createOrder({ email: 'dr@no.com', coffee: 'decaf'}); 
Adding order for dr@no.com 
undefined 

» myTruck.createOrder({ email: 'm@bond.com', coffee: 'earl grey'}); 
Adding order for m@bond.com 
undefined 

》 myTruck.printOrders(); 
Truck #ncc-1701 has pending orders: 
Object {email: "me@goldfinger.com", coffee: "double mocha"} 
Object {email: "dr@no.com", coffee: "decaf"} 
Object femail: "me@bond.com", coffee: "earl grey"} 
undefined 

> myTruck.deliverOrder('dr@no. com’'); 
Delivering order for dr@no.com 
undefined 

» myTruck.deliverOrder('m@bond. com'); 

Delivering order for m@bond.com 

undefined 

myTruck.printOrders(); 


Truck #ncc-1701 has pending orders: 
Object femail: "me@goldfinger.com", coffee: "double mocha"} 
undefined 

> | 


图 8-32 一 个 繁忙 的 美食 车 


truck.js:13 


truck.js:13 


truck.js:13 


truck.js:28 
truck.js:30 
truck.js:30 
truck.js:30 


truck.js:18 


truck.js:18 


truck.js:28 
truck.js:30 


这 就 是 模块 化 的 好 处 : 你 可 以 分 层 处 理应 用 ， 而 每 一 个 新 层级 都 基于 旧 模 块 搭建 而 成 。 


8.9 初级 挑战 : 使 用 非 星 迷 熟悉 的 餐车 ID” 
在 main.js 中 传人 不 同 的 字符 串 作 为 truckId。 


(有 一 些 比较 好 的 选项 ， 例 如 Serenity 、KITT 或 者 Galactica。HAL 或 许 不 是 一 个 好 的 选择 。”) 


8.10 延展 阅读 : 模块 私有 数据 


在 模块 中 , 构造 函数 和 原型 方法 可 以 访问 IIFE 内 部 声明 的 所 有 变量 。 








不 过 也 可 以 将 一 部 分 方 


法 添加 到 原型 上 ， 这 样 既 可 以 在 实例 间 分 享 数 据 ， 又 可 以 对 模块 外 部 隐藏 数据 。 例 如 : 


(function (window) { 
"use strict',; 
var App = window.App || {}; 
var LaunchCount = 0; 











Q@ ncc-1701 是 《星际 迷航 》 中 的 主角 船 联 邦 星 舰 企业 号 的 代号 。 一 一 译 者 注 























@) Serenity 为 电影 《 剖 出 宁静 号 》 中 的 飞船 ，KITT 为 电视 剧 《 霹 雳 游 侠 》 中 的 智能 跑车 ，Galactica 为 电视 剧 《 太 空 堡 








全 卡拉 狄 加 》 中 的 飞船 ，HAL 为 《2001 太 空 漫 游 》 中 的 智能 电脑 。 译 者 注 
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function Spaceship() { 
// 在 此 处 播 入 初始 化 代码 


Spaceship.prototype.blastoff = function () { 
// 闭 包 允许 我 们 访问 LaunchCount 属 性 


launchCount++; 
console.log('Spaceship launched!') 

} 

Spaceship.prototype.reportLaunchCount = function () { 
console.log('Total number of Launches: ' + launchCount); 

} 


App.Spaceship = Spaceship 
window.App = App; 
}) (window) ; 


其 他 语言 会 提供 一 种 方法 来 声明 私有 变量 , 不 过 JavaScript 没 有 这 种 方法 。 但 我 们 可 以 使 用 闭 
包 (使 用 外 部 声明 的 变量 的 函数 ) 来 模拟 私有 变量 。 


8.11 中 级 挑战 : 私有 化 数据 


更 新 DataStore 让 data 属 性 私有 化 。 
有 任何 理由 拒绝 做 这 件 事 吗 ? 想像 一 下 如 果 声 明了 多 个 DataStore 实 例会 发 生 什 么 ? 


8.12 延展 阅读 : 在 forEach 的 回调 函数 中 设置 this 


我 之 前 撒 了 个 小 谎 ，bind 并 不 是 为 forEach 的 回调 函数 设置 this 值 的 唯一 方法 。 

通过 在 MDN ( developermozilla.org/en-US/docs/Web/JavaScripVReference/Global Objects/Array/ 
forEach ) 上 查看 关于 Array.prototype.forEach 的 文档 , 可 知 forEach 接 受 可 选 的 第 二 个 参数 ， 
该 参数 会 被 当 作 回调 函数 中 的 this 。 

这 意味 着 也 可 以 这 么 编写 printOrders: 




































































Truck.prototype.printOrders = function () { 
var customerIdArray = Object.keys(this.db.getAll()); 


console.log('Truck #' + this.truckId + ' has pending orders:'); 
customerIdArray.forEach(function (id) { 
console.log(this.db.get(id)); 
}, this); 
}; 


但 bind 仍 然 是 一 个 十 分 有 用 的 函数 ， 在 接 下 来 的 几 章 中 还 会 看 到 它 。Truck.prototype. 
printorders 为 学 习 这 些 语法 提供 了 一 个 很 好 的 机 会 








第 9 章 
Bootstrap 简 介 








本 章 将 为 UI 创建 HTML 标 记 。 我 们 会 采用 流行 的 Bootstrap CSS 框 架 提供 的 样式 来 美化 UI， 
这 样 就 不 必 自 己 创建 CSS, 从 而 能 专注 于 JavaScript 应 用 程序 逻辑 一 一 这 部 分 内 容 将 在 第 10 章 中 
学 习 。 

我 们 将 分 两 步 来 为 CoffeeRun 应 用 程序 创建 UI。 首 先 创建 一 个 表单 ， 用 户 可 以 在 其 中 输入 包 
含 所 有 细节 的 咖啡 订单 〈 如 图 9-1 所 示 )。 接 着 ， 搭 建 一 个 用 于 显示 现 有 咖啡 订单 的 清单 。 每 个 部 
分 都 会 有 相应 的 JavaScript 模 块 处 理 用 户 交 互 。 





®ao / [corun 











€ SC [localhost:3000 训 


CoffeeRun 
Coffee order 








Email 


dr@who.com 





Flavor Shot 


None 


Caffeine Rating 








Submit Reset 


图 9-1 使 用 Bootstrap 样 式 的 CoffeeRun 


9.1 添加 Bootstrap 


Bootstrap CSS 类 库 提 供 了 一 系列 可 以 应 用 于 网 站 和 应 用 程序 的 样式 。 但 是 因为 其 太 过 于 普 
及 ， 所 以 如 有 果 不 进行 一 点 儿 定 制 工作 ， 你 的 网 站 很 可 能 会 和 其 他 网 站 “ 撞 衫 ”。 不 过 Bootstrap 确 
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实 非常 适合 快速 创建 好 看 的 原型 。 

和 在 Ottergram 中 引用 normalize.css 一 样 ， 你 也 可 以 从 cdnjs.com 加 载 Bootstrap 。 使 用 Bootstrap 
3.3.6 版 本 ， 地 址 是 cdnjs.com/libraries/twitter-bootstrap/3.3.6。( 如 果 你 想 在 项 目 中 使 用 最 新 版 本 ， 
请 到 cdnjs.com 搜 索 “twitter bootstrap”。) 

确保 得 到 的 是 bootstrap.min.css 的 链接 ( 如 图 9-2 所 示 )， 而 不 是 其 字体 或 者 主题 的 链接 。 





https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css 





图 9-2 cdnjs.com 的 twitter-bootstrap 页 面 


复制 链接 之 后 ， 打 开 index.html 添 加 一 个 <Link> 标 签 ， 把 该 标签 的 href 属 性 设置 为 复制 的 链 
接地 址 。( 为 了 适应 版 面 ， 不 得 不 将 href 属 性 换行 ， 但 是 你 应 该 把 它 写成 一 行 。) 





<head> 
<meta charset="utf-8"> 
<titLe>coffeerun</titLe> 
<Link rel="stylesheet" href='"https://cdnjs.cLoudfLare.com/ajax/Libs/twitter-bootst 
rap/3.3.6/css/bootstrap .min.css"> 
</head> 


Bootstrap 的 原理 


Bootstrap 可 以 为 网 站 和 Web 应 用 提供 “ 开 箱 即 用 ”的 自 适应 样式 。 大 多 数 时 候 ， 只 需要 引入 
CSS 文 件 ， 并 给 HTML 标 记 添 加 类 即 可 。 我 们 将 用 到 的 一 个 重要 的 类 是 container 类 。 
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在 index.html 的 <body> 元 素 中 添加 container 类 ， 同 时 在 里 面 添 加 一 个 页 头 。 


<titLe>coffeerun</titLe> 
<Link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootst 
rap/3.3.6/css/bootstrap.min.css"> 
</head> 
<bedy> 
<body class="container"> 
<header> 
<h1>CoffeeRun</h1> 
</header> 
<Script src="scripts/datastore.js" charset="utf-8"></script> 
<script src="scripts/truck.js" charset="utf-8"></script> 
<script src="scripts/main.js" charset="utf-8"></script> 
</body> 
</html> 


container 类 用 于 包 右 所 有 需要 适应 视 口 大 小 的 内 容 ， 它 提供 了 基本 的 布局 自 适应 功能 。 
保存 index.html, 确 呆 browser-sync 进 程 正在 运行 , 查看 网 页 。 现 在 它 看 起 来 应 该 如 图 9-3 所 示 。 

















DD coffeeRun x I 
所 CC [DD localhost:3000 Tr 三 
CoffeeRun 











图 9-3 ”具有 Bootstrap 样 式 的 页 头 


虽然 页 面 上 还 没有 太 多 内 容 , 但 是 页 头 已 经 有 了 一 个 令 人 和 舒服 的 内 边 距 ,并 且 也 有 了 字体 
Bootstrap 具 有 大 量 不 同 视觉 元 素 的 样式 ，CoffeeRun 只 会 接触 到 其 皮毛 ， 后 面 的 章节 会 探索 
更 多 的 样式 。 现 在 ， 是 时 候 为 订单 表单 添加 标记 了 。 


9.2 创建 订单 表单 


在 index.html 中 新 创建 的 <header> 元 素 的 下 方 添 加 一 个 <section> 标 签 、 两 个 <div> 标 签 和 
一 个 <form> 标 签 。 








<header> 
<h1>CoffeeRun</h1> 
</header> 
<Section> 
<div class="panel panel-default"> 
<div class="panel-body"> 
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<form data-coffee-order="form"> 
<!-- Input elements will go here --> 
</form> 
</div> 
</div> 
</section> 
<script src="scripts/datastore.js" charset="utf-8"></script> 




















<form> 标 签 将 是 所 有 重要 交互 的 发 生地 ， 给 它 添加 一 个 值 为 form 的 data-coffee-order 属 
性 。 就 像 在 Ottergram 中 所 做 的 一 样 ， 我 们 也 将 在 CoffeeRun 中 使 用 数据 属性 以 便于 Javascript 访 问 
DOM 元 素 。 

为 了 页 面 布局 ,添加 两 个 <div> 标 签 。 其 实 <div> 标 签 并 不 是 那么 重要 ， 重 要 的 是 为 <div> 
添加 了 panel、panel-default 和 panel-body 类 ， 这 些 类 都 将 是 触发 样式 改变 的 Bootstrap 类 。 

切记 ，<div> 只 是 用 于 包 于 其 他 标记 的 通用 块 级 容器 。 这 些 <div> 标 签 会 与 包 于 它们 的 父 级 
元 素 拥有 相同 的 水 平 宽度 。 它 们 将 在 CoffeeRun 中 被 频繁 使 用 ， 我 们 也 经 常会 在 Bootstrap 文 档 中 
看 到 它们 的 身影 。 

你 可 能 好 奇 为 什么 <section> 标 签 包 庄 了 <div> 和 <form>。 那 是 因为 <div> 并 没有 语义 ， 而 
<section> 有 ， 它 可 以 对 其 他 标记 按 逻 辑 进 行 分 组 。 这 里 的 <section> 把 表单 的 UI 给 框 起 来 了 。 
你 可 以 很 轻易 地 为 页 面 创建 另 一 个 <section> ， 用 来 包 右 其 他 UI 部 分 。 


9.2.1 添加 文本 输入 字段 


咖啡 订单 才 是 我 们 关心 的 重要 信息 。 如 果 过 去 十 年 里 你 一 直 在 咖啡 店 工作 ,就 会 知道 咖啡 订 
单 可 能 会 相当 复杂 。 现 在 先 使 用 一 个 单行 文本 字段 来 填写 订单 , 稍 后 还 会 添加 更 多 的 字段 来 获取 
更 多 信息 。 

当 对 表单 使 用 Bootstrap 时 ， 可 以 添加 额外 的 <div> 元 素 ， 这 些 元 素 仅 仅 是 为 了 应 用 Bootstrap 
库 中 定义 的 样式 。 

向 index.html 添 加 一 个 类 名 为 form-group 的 <div>。Bootstrap 的 form-group 类 为 表单 元 素 提 
供 了 一 致 的 垂直 间距 。 然 后 添加 <LabeL> 和 <input> 元 素 。 





nl 







































































<div class="panel panel-default"> 
<div class="panel-body"> 
<form data-coffee-order="form"> 


<div class="form-group"> 
<label>Coffee Order</label> 
<input class="form-control" name="coffee"> 
</div> 
</form> 
</div> 
</div> 
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form-control 是 Bootstrap 定 义 的 男 一 个 类 ， 它 能 为 表单 元 素 提供 布局 和 排版 样式 。 
保存 index.html， 并 在 浏览 器 中 检查 结果 ( 如 图 9-4 所 示 )。 





2 
山中 


@@@ /Mh cooun 








Ee © 口 localhost:3000 





CoffeeRun 


Coffee Order 


图 9-4 ”咖啡 订单 的 输入 字段 








<input> 元 素 默 认为 单行 文本 字段 。 该 元 素 除 了 有 form-control 类 ,还 具有 一 个 name 属 性 。 
当 提 交 表 单 的 时 候 , 数据 将 会 被 发 送 到 服务 峰 ,这 个 name 属 性 将 与 数据 一 起 发 送 。 如 果 将 表单 数 
据 视 为 键 值 对 ， 那 么 name 属 性 对 应 的 就 是 键 名 ， 用 户 在 字段 中 输入 的 数据 是 键 值 。 

1. 关联 标签 和 表单 元 素 

<LabetL> 标 签 可 以 大 大 增强 表单 元 素 的 可 用 性 。 我 们 为 <LabetL> 标 签 设 置 for 属 性 来 标记 对 应 
表单 元 素 ，for 属 性 的 值 与 要 标记 的 表单 元 素 的 id 属性 相 匹配 。 

在 index.html 中 ， 分 别 为 <LabeL> 和 <input> 表 单元 素 添 加 for 和 id 属性 ， 并 给 这 两 个 属性 设 
置 相同 的 coffee0rder 值 。 
































<div class="panel panel-default"> 
<div class="panel-body"> 
<form data-coffee-order="form"> 
<div class="form-group"> 
<label for="coffeeOrder">Coffee Order</label> 
<input class="form-control" name="coffee" id="coffeeOrder"> 
</div> 
</form> 
</div> 
</div> 


当 一 个 <LabeL> 链 接 到 了 一 个 表单 元 素 时 ， 可 以 点 击 页 面 上 的 <LabeL> 文 本 ， 这 样 就 会 使 其 
链接 的 表单 元 素 处 于 激活 状态 。 我 们 应 该 始终 把 <LabetL> 元 素 链接 到 其 相应 的 表单 元 素 。 

想 看 结果 的 话 ， 就 保存 index.html， 切 换 到 浏览 器 ， 然 后 单 击 咖啡 订单 的 标签 文本 。 此 时 ， 
<input> 应 该 获得 了 焦点 ， 然 后 你 就 可 以 输入 了 ( 如 图 9-5 所 示 )。 
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© DD coeenun 


CG [9 localhost:3000 


| 


Wh 


® DI Coreerun 


> © [ localhost:3000 











CoffeeRun 
图 9-5 
2. 添加 自动 聚焦 功能 
因为 这 是 屏幕 上 的 第 一 个 字段， 
在 其 中 输入 文本 。 


mm 
I 


PH 


CoffeeRun 


一 一 点击“ 咖啡 订单 ”一 一 > cofee order 
| 











6 关联 的 Label，input 获 取 焦 点 





所 以 我 们 希望 用 户 在 页 面 加 载 完 成 之 后 无 须 点 击 , 就 能 立即 





要 实现 这 一 点 ， 请 为 index.html 中 的 <input> 添 加 一 个 autofocus 属 性 。 


<div class="form-group"> 
<label for="coffeeOrder">Coffee Order</label> 
<input class="form-control" name="coffee" id="coffeeOrder" autofocus> 


</div> 





六 
Wr 








[| 
有 目 呈 局 腕 显示。 


@' 4 DD coffeeRun x \ | 





保存 对 index.html 的 更 改 ， 然 后 返回 浏览 器 。 你 会 看 到 文本 输入 字段 在 页 面 加 载 完 成 后 被 聚 








所 GC [localhost:3000 Te 





CoffeeRun 


Coffee Order 





图 9-6 页面 加 载 完成 后 ， 拥 有 autofocus 属 性 的 文本 字段 








请 注意 ，autofocus 属 性 没有 值 ， 它 也 不 需要 有 值 。 只 要 <input> 标 签 中 存在 autofocus 属 


| 























性 ,浏览 器 就 会 知道 要 激活 该 字段 autofocus 属 性 是 布尔 属性 ,这 意味 着 它 唯一 可 能 的 值 是 true 


或 者 false。 你 只 需要 将 autofocus 











属性 添加 到 标签 , 即 可 设置 其 值 。 当 属性 存在 时 ，autofocus 


为 true; 当 属 性 不 存在 时 ，autofocus 为 false。 





3. 添加 邮箱 输入 字段 


在 创建 Trunk 和 DataStore 模 块 时 ， 可 以 通过 客户 的 邮箱 地 址 跟踪 订单 。 现 在 ， 我 们 将 使 用 
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另 一 个 <input> 元 素来 获取 该 信息 。 

向 index.html 添 加 另 一 个 包 庄 了 <LabeL> 和 <input> 的 .form-group 元 素 。 把 <input> 元 素 的 
type 属 性 设置 为 email, 将 name 属 性 设置 为 emaiLAddress, 将 id 设 置 为 emailInput。 另外 添加 
一 个 value 属 性 ， 并 把 其 值 设 置 为 空 字符 


中 ， 这 保证 此 字段 在 加 载 网 页 时 为 空 。 最 后 使 用 id 把 
<LabeL> 和 <input> 关 联 起 来 。 






































<form data-coffee-order="form"> 
<div class="form-group"> 


<label for="coffeeOrder">Coffee Order</label> 

<input class="form-control" name="coffee" id="coffeeOrder" autofocus> 
</div> 
<div class="form-group"> 

<label for='"emaiLInput">EmaiL</LabeL> 


<input class="form-control" type="email" name="emailAddress" 
id="emailInput" value=""> 
</div> 


</form> 


保存 index.html， 打 开 浏 览 








， 查 看 新 的 表单 字段 ( 如 图 9-7 所 示 )。 
四 @@ 
oC 


<$ CoffeeRun! 


localhost:3000 


CoffeeRun 


Coffee Order 


图 9-7 ”邮箱 地 址 输入 字段 
4. 用 placeholder 显 示 要 输入 的 示例 文本 


有 时 候 用 户 希 望 得 到 应 该 在 文本 字段 中 输入 什么 的 建议 。 要 创建 示例 文本 ， 请 使 用 
placeholder 属 性 。 


在 index.html 中 为 新 添加 的 <input> 元 素 添 加 placeholder 











<div class="form-group"> 
<label for="emailInput">Email</label> 


<input class="form-control" type="email" name="emailAddress" 
id="emailInput" value="" placeholder="dr@who.com"> 
</div> 
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保存 文件 ， 结 果 将 如 图 9-8 所 示 。 


息 导电 ， 口 coresenun 











“= CC DD localhost:3000 


CoffeeRun 


Coffee Order 





Email 


图 9-8 ”邮箱 文本 框 具有 placeholder 文 本 


placeholder 的 值 将 会 在 文本 字段 中 显示 ， 直 到 用 户 输 入 文本 时 才 消 失 。 如 果 用 户 删 除 字 段 
中 所 有 的 文本 ，placeholder 文 本 则 会 再 次 出 现 。 








9.2.2 ”提供 单 选 按钮 


接 下 来 , 我们 希望 用 户 能 够 指定 他 们 咖啡 饮品 的 杯 型 一 一 他 们 能 够 在 小 杯 、 大 杯 、 超 大 杯 中 
选择 , 并 且 只 能 选择 一 种 。 对 于 此 类 型 的 数据 输入 , 可 以 使 用 type 属 性 为 radio 的 <input> 字 段 。 

单 选 按钮 标记 与 其 他 <input> 字 段 不 同 ， 每 个 单 选 按钮 都 包含 被 <LabeL> 元 素 包 囊 的 
<input> 字 段 。<LabetL> 将 被 包含 在 一 个 类 名 也 为 radio 的 <div> 中 。 

不 需要 对 咖啡 订单 和 邮箱 地 址 的 <LabetL> 定 义 for 属 性 , 因为 <input> 被 <LabeL> 包 庄 , 它们 
会 被 自动 关联 。 

为 什么 单 选 按 钮 的 HTML 与 众 不 同 ? 那 是 因为 Bootstrap 以 区 别 于 其 他 表单 元 素 的 方式 为 单 
选 按钮 添加 样式 。 

我 们 在 编写 代码 时 既 可 以 选择 将 <input> 元 素 包 庄 在 <LabeL> 中 ， 也 可 以 使 用 for 属 性 来 关联 
<label> 和 <input> 一 一 两 种 方式 都 是 正确 的 。 但 是 使 用 Bootstrap 时 还 是 要 遵循 它 的 规则 ， 从 而 得 
到 所 需要 的 样式 。 有关 如 何 组 织 H8TML 的 示例 , 请 参考 Bootstrap 文 档 ( getbootstrap.com/css/#forms )。 

在 index.html 中 表示 邮箱 地 址 的 <input> 后 面 添 加 单 选 按钮 标记 。 













































































<div class="form-group"> 
<label for="emailInput">Email</label> 
<input class="form-control" type="email" name="emailAddress" 
id="emailInput" value="" placeholder="dr@who.com"> 
</div> 
<div class="radio"> 
<label> 
<input type="radio" name="size" value="short"> 
Short 
</LabeL> 
</div> 
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<div class="radio"> 
<label> 
<input type="radio" name="size" value="tall" checked> 
Tall 
</LabeL> 
</div> 
<div class="radio"> 
<label> 
<input type="radio" name="size" value="grande"> 
Grande 
</LabeL> 
</div> 
</form> 





将 这 三 个 radio 的 name 属 性 设置 为 相同 的 值 ( size )。 这 会 告诉 浏览 器 ， 一 次 只 能 选择 (或 
“选中 ”) 其 中 的 一 个 。 为 大 杯 单 选 按 钮 添加 一 个 名 为 checked 的 布尔 属性 ， 它 与 autofocus 的 工 
作 方 式 一 样 : 当 存 在 时 ， 属 性 值 为 true; 当 不 存在 时 ， 则 为 false。 

保存 index.html， 并 查看 新 的 单 选 按钮 ( 如 图 9-9 所 示 )。 

















©@Oe0 口 coffeeRun x 六 


CD localhost:3002 文革 





CoffeeRun 


Coffee Order 
| 
Email 
dr@who.com 
Short 


© ml 


Grande 





图 9-9 ”咖啡 杯 型 单 选 按钮 
尝试 点 击 单 选 按钮 或 者 其 旁边 的 文本 。 无 论 采 用 哪 种 方式 ， 该 单 选 按钮 都 应 该 被 选中 。 


9.2.3 ”添加 下 拉 菜 单 


有 些 人 对 调味 咖啡 情 有 独 钟 。 可 以 给 他 们 提供 几 种 不 同 的 口味 以 供 选择 。 默 认 情 况 下 不 添加 
任何 口味 。 

我 们 当然 可 以 使 用 一 组 单 选 按钮 ,但 是 列表 中 可 能 有 很 多 种 口味 。 为 了 确保 口味 选择 部 分 不 
会 打 乱 UI， 我 们 将 使 用 下 拉 菜 

要 创建 一 个 Bootstrap 样 式 的 下 拉 菜 单 ， 需 要 向 index.html 添 加 一 个 类 名 为 form-group 的 
<div>。 创 建 一 个 类 名 为 form- control 的 <select> 元 素 ，Bootstrap 将 会 把 此 元 素 设 置 为 下 拉 菜 
单 。 把 <seLect> 和 它 的 <LabeL> 关 联 ，<LabetL> 的 id 为 fTLavorShot。 在 <seLect> 内 为 每 个 要 显 
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示 的 菜单 项 添加 一 个 <option> 元 素 ， 给 每 个 菜单 项 一 个 相应 的 值 。 


<div class="radio"> 
<label> 
<input type="radio" name="size" value="grande"> 
Grande 
</label> 
</div> 
<div class="form-group"> 
<label for="flavorShot">Flavor Shot</LabeL> 


<select id="flavorShot" class="form-control" name="flavor"> 


<option value="">None</option> 
<option value="caramel">Caramel</option> 
<option value="almond">Almond</option> 
<option value="mocha">Mocha</option> 
</select> 
</div> 
</form> 
</div> 
</div> 


每 个 <option> 元 素 提供 一 个 可 能 的 值 ， 而 <seLect> 元 素 指 定 name 值 。 























保存 index.html, 并 检查 下 拉 列 表 是 否 正常 显示 , 且 下 拉 框 中 有 你 所 添加 的 所 有 选项 ( 如 图 9-10 所 示 )。 


@@ [ cotfeeRun 








和 CQ 丫 localhost:3000 To 


CoffeeRun 


Coffee Order 





Email 


Short 
Tall 
Grande 
Flavor Shot 
v None 
Caramel 


AImond 
Mocha 


图 9-10 ”咖啡 口味 下 拉 荣 单 





默认 情况 下 是 第 一 个 <option> 元 素 被 选中 。 如 果 想 自动 选择 其 他 的 选项 〈 而 不 





可 以 为 将 要 选择 的 option 元 素 添加 一 个 selected 的 布尔 属性 。 











应 将 第 一 个 下 拉 项 的 value 属 


ol 





| 
出 


性 设置 为 空 字符 串 。 如 果 完 全 删除 了 vatLue 属 性 ， 








三 着 人 7 


是 第 一 个 )， 








浏览 器 将 使 


用 "None" 作 为 value 的 值 。 我 们 永远 不 应 该 假设 浏览 器 会 按照 我 们 的 预想 来 做 , 所 以 这 里 最 好 设 


置 vaLue 属 性 。 


9.2 ”创建 订单 表单 185 
9.2.4 添加 范围 滑 块 





不 是 每 个 人 都 喜欢 浓 到 发 苦 的 咖啡 ,我 们 想 让 用 户 为 他 们 的 咖啡 浓度 选择 一 个 介 于 0~100 之 
间 的 值 。 另 一 方面 ， 我 们 也 不 希望 他 们 必须 手动 键入 一 个 确切 的 值 。 


<input> 和 <label> 元 素 应 该 关联 起 来 ， 并 包含 在 类 名 为 form-group 的 <div> 中 。 为 了 方便 客户 
使 用 ， 将 默认 值 设 定 为 30。 





为 此 ， 可 以 在 index.html 中 添加 一 个 类 型 为 range 的 <input> 元 素 ， 这 将 创建 一 个 范围 滑 块 。 


<option value="mocha">Mocha</option> 
</select> 
</div> 


<div class="form-group"> 


</div> 


<label for="strengthLevel">Caffeine Rating</LabeL> 
<input name="strength" id="strengthLevel" type="range" value="30"> 
</form> 


保存 index.html， 并 在 浏览 器 中 试 试 这 个 新 滑 块 ， 如 图 9-11 所 示 。 


DD coffeeRun 





所 台中 localhost:3000 
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图 9-11 咖啡 浓度 选择 滑 块 
9.2.5 ”添加 提交 按钮 和 重 置 按钮 





最 后 要 添加 一 个 提交 按钮 。 同 时 ， 以 防 有 的 用 户 想 要 重新 填写 ， 还 应 该 # 
来 清除 表单 。 


下 添 加 一 个 重 置 按钮 
通常 , 提交 按钮 只 


只 是 一 个 类 型 为 submit 的 <input> 元 素 ; 同样 , 重 置 按钮 是 一 个 类 型 为 reset 
的 <input> 元 素 。 但 是 为 了 要 利用 Bootstrap 的 CSS， 我 们 将 使 用 <button> 元 素来 替代 它们 。 
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在 index.html 中 添加 两 个 类 名 为 btn btn-default 的 <button> 元 素 。 将 第 一 个 的 type 设 置 为 
submit, 将 第 二 个 的 type 设 置 为 reset。 在 开始 标签 和 结束 标签 之 间 , 将 Submit 和 Reset 作 为 描 
述 文本 。 





<div class="form-group"> 
<label for="strengthLevel">Caffeine Rating</label> 
<input name="strength" id="strengthLevel" type="range" value="30"> 
</div> 
<button type="submit" class="btn btn-default">Submit</button> 
<button type="reset" class="btn btn-default">Reset</button> 
</form> 


保存 更 改 , 浏览 絮 将 在 表单 底部 添加 按钮 ( 如 图 9-12 所 示 )。 


© 癌 cotfeeRun 
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Short 
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None 
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Submit Reset 








图 9-12 ”提交 按钮 与 重 置 按钮 


提交 按钮 暂时 不 会 执行 任何 操作 , 这 部 分 内 容 将 在 下 一 章 讲 解 。 但 是 重 置 按钮 会 将 表单 的 值 
重 置 为 默认 值 。 

这 两 个 按钮 有 一 对 类 名 看 似 是 多 余 的 ， 其 
btn 类 为 Bootstrap 按 钮 提供 了 所 有 标准 的 视觉 
为 按钮 添加 了 一 个 白色 的 背景 。 

我 们 已 经 使 用 Bootstrap UI 框架 设置 了 CoffeeRun 应 用 程序 的 样式 。 通 过 使 用 Bootstrap 的 标记 
和 类 名 模式 ， 这 个 应 用 程序 在 各 种 尺寸 的 屏幕 和 浏览 器 版 本 上 都 拥有 一 致 的 外 观 和 体验 。 

要 了 解 有 关 Bootstrap 的 更 多 内 容 ， 请 参阅 getbootstrap.com/css 上 的 优秀 文档 。 

Bootstrap 特 别 适合 快速 为 应 用 程序 添加 样式 , 好 让 我 们 专注 于 应 用 程序 逻辑 。 在 接 下 来 的 几 
章 中 ， 我 们 也 会 这 样 做 。 











将 


这 纯粹 是 Bootstrap 为 了 样式 而 制定 的 一 种 约定 。 
性 ， 这 其 中 包括 圆 角 和 内 边 距 。btn-defauLt 类 








el 























使 用 JavaScript 处 理 表 单 








CoffeeRun 的 编写 工作 已 经 有 了 很 好 的 开始 。 到 目前 为 止 ， 它 有 两 个 处 理 其 内 部 逻辑 的 
JavaScript 模 块 和 一 个 Bootstrap 样 式 的 HTML 表单 。 在 本 章 中 ,我们 将 编写 一 个 更 复杂 的 模块 ,将 
表单 和 逻辑 关联 ， 以 便于 用 户 使 用 表单 输入 咖啡 订单 。 

回顾 第 2 章 ， 浏 览 需 通过 使 用 特定 URL 发 送信 息 请 求 与 服务 器 进行 通信 。 具 体 来 说 ， 对 于 要 
加 载 的 每 个 文件 ， 浏 览 器 都 要 向 该 文件 所 在 的 服务 器 发 送 一 个 GET 请 求 。 

当 浏览 需 需 要 向 服务 器 发 送信 息 时 〈 比如 当 用 户 填 写 并 提交 表单 时 )， 浏 览 顺 会 提取 表单 数 
据 ， 并 将 其 放 入 POST 请 求 中 。 服 务 咒 接受 请 求 ， 处 理 数据 ， 然 后 返回 一 个 响应 〈《 如 图 10-1 所 示 )。 
































POST 请 求 





coffee: "espresso" 
emailAddress: "caquino@bignerdranch.com" 
size: "grande” 
ne 三 flavor: "" 
| D eno: e000 + strength: 99 
! 


CoffeeRun 














Flavor Shot 


Cafleine Rating 


Submit | Reset 





图 10-1 传统 的 服务 器 端 表单 处 理 


在 CoffeeRun 中 ,我们 不 需要 将 表单 数据 发 送 到 服务 器 进行 处 理 。Truck 和 DataStore 模 块 起 
到 了 与 传统 服务 器 端 代码 相同 的 作用 ， 它 们 的 工作 是 为 应 用 程序 处 理 业 务 逻 辑 和 数据 存储 。 
因为 这 些 代码 保存 在 浏览 器 中 而 不 是 服务 器 上 , 所 以 我 们 需要 在 表单 提交 数据 之 前 捕获 其 数 
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据 。 本 章 将 创建 一 个 新 的 FormHandler 模 块 来 捕获 数据 。 此 外 ,还 将 把 jQuery 库 添加 到 CoffeeRun 
中 进行 辅助 开发 。 接 下 来 的 几 章 将 多 次 用 到 jQuery 的 强大 功能 来 帮助 我 们 开发 CoffeeRun。 





























10.1 创建 FormHandLer 模块 


FormHandler 模 块 会 阻止 浏览 器 向 服务 器 发 送 表单 数据 。 作 为 蔡 代 方式 ， 它 在 用 户 单 击 提交 
按钮 时 从 表单 中 读 取 值 ,然后 使 用 我 们 在 第 8 章 中 编写 的 create0rder 方 法 将 该 数据 发 送 到 Trunk 
实例 ( 如 图 10-2 所 示 )。 


<form> | 一 le 
subnmit 


全 一 一 -一 add() 一 一 一 






































图 10-2 带 有 App.FormHandler 的 CoffeeRun 应 用 程序 体系 结构 














先 在 scripts 文 件 夹 中 创建 一 个 名 为 formhandlerjs 的 新 文件 ， 并 在 index.html 中 为 它 添加 一 个 
<script> 标 签 。 


</form> 
</div> 
</div> 
</section> 
<script src="scripts/formhandler.js" charset="utf-8"></script> 
<script src="scripts/datastore.js" charset="utf-8"></script> 
<script src="scripts/truck.js" charset="utf-8"></script> 
<script src="scripts/main.js" charset="utf-8"></script> 
</body> 
</html> 


像 其 他 模块 一 样 ,FormHandler 将 使 用 [FE 封装 代码 ,并 将 一 个 构造 函数 附加 到 window.App 属 性 。 

打开 scripts/formhandler.js 并 创建 一 个 HFE， 在 IIFE 中 创建 一 个 App 变 量 ， 把 window.App 的 现 
有 值 赋值 给 它 。 如果 window.App 不 存在 , 将 一 个 空 对 象 字面 值 赋值 给 它 。 声明 一 个 FormHandler 
构造 函数 ， 并 将 其 导出 到 window.App 属 性 。 


(function (window) { 
'use strict'; 
var App = window.App || {0}; 




















function FormHandler() { 
// 放置 要 运行 的 代码 
} 
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App.FormHandler = FormHandler; 
window.App = App; 


}) (window); 
到 目前 为 止 ， 这 段 代码 依然 遵循 我 们 在 Trunk 和 DataStore 模 块 中 所 使 用 的 模式 。 但 是 很 快 
它 就 会 变 得 不 同 ， 因 为 我 们 将 引入 jQuery 用 于 开发 。 





10.1.1 jQuery 简介 


jQuery 库 由 John Resig 于 2006 年 创建 ， 是 最 受 欢迎 的 通用 开源 JavaScript 库 之 一 。 此 外 ， 它 为 
DOM 操 作 、 元 素 创建 、 服 务 器 通信 和 事件 处 理 提供 了 快速 便捷 的 方法 。 

熟悉 jQuery 是 非常 有 用 的 ， 因 为 很 多 代码 都 使 用 它 来 编写 。 另 外 ， 许 多 库 也 遵循 jQuery 的 书 
写 和 使 用 约定 。 事 实 上 ，jQuery 直 接 影响 了 标准 的 DOM API ( document .querySeLector 和 
document .querySelectorAll 就 是 受 此 影响 的 两 个 例子 )。 

然而 现在 我 们 并 不 会 深入 讲解 jQuery， 而 是 依照 使 用 需求 来 介绍 它 ， 从 而 让 它 能 更 好 地 帮助 
我 们 构建 CoffeeRun 更 复杂 的 部 分 。 如 果 想 进一步 探索 jQuery， 请 查阅 jquery.com 上 的 文档 。 

和 Bootstrap 一 样 ， 从 cdnjs.com 添 加 一 个 jQuery 的 副本 到 项 目 中 。 到 cdnjs.com/libraries/jquery 
找到 2.1.4 版 本 并 复制 其 地 址 。( 可 能 有 更 高 版 本 , 但 是 在 CoffeeRun 中 应 使 用 2.1.4 版 本 来 避免 兼容 
性 问题 。) 

在 index.html 中 添加 一 个 jQuery 的 <script> 标 签 。 




















































































































</div> 

</section> 

<script src="https://cdnjs.cloudflare.com/ajax/Tlibs/jquery/2.1.4/jquery.min.js" 
charset="utf-8"></script> 

<script src="scripts/formhandler.js" charset="utf-8"></script> 

<script src="scripts/datastore.js" charset="utf-8"></script> 

<script src="scripts/truck.js" charset="utf-8"></script> 

<script src="scripts/main.js" charset="utf-8"></script> 


保存 index.html. 


10.1.2 导入 jQuery 


FormHandler 将 会 像 导 入 App 一 样 导入 jQuery ,这 样 做 是 为 了 指明 模块 是 在 使 用 在 别处 定义 的 
代码 。 这 是 有 助 于 团队 成 员 互 相 协 调和 日 后 维护 的 最 佳 做 法 。 
在 formhandler.js 中 创建 一 个 名 为 $ 的 局 部 变量 ， 然 后 赋值 为 wvindow. jQuery。 


(function (window) { 
"use strict'; 
var App = window.App || {}; 
var $ = window.jQuery; 
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function FormHandler() { 
// 放 置 要 运行 的 代码 


App.FormHandter = FormHandler; 
window.App = App; 


}) (window); 


当 我 们 添加 jQuery<script> 标 签 时 ， 它 创建 了 一 个 名 为 jQuery 的 函数 ， 以 及 一 个 指向 该 函 
数 的 名 为 $ 的 变量 。 大 多 数 开发 人 员 更 喜欢 在 他 们 的 代码 中 使 用 $。 为 了 保持 一 致 性 , 应 该 在 导入 
window. jQuery 的 时 候 将 其 分 配给 本 地 变量 $。 

为 什么 $ 被 用 作 变 量 名 ?其 实 JavaScript 变 量 名 称 可 以 包含 字母 、 数 字 、 下 划 线 (_) 或 者 美 
元 符号 ($ )。( 它们 只 能 以 字母 、 下 划 线 或 者 美元 符号 开头 ,但 不 能 以 数字 开头 。) 而 jQuery 的 作 
者 之 所 以 选择 $ 作 为 变量 名 称 ， 是 因为 它 简短 ， 而 且 不 太 可 能 被 项 目 中 的 其 他 代码 所 使 用 。 


























10.1.3 ”使 用 seLector 人 参数 配置 FormHandtLer 实 例 


FormHandLer 模 块 应 该 可 以 与 任何 一 个 <form> 元 素 配 合 使 用 。 为 了 实现 这 一 点 ， 可 以 给 
FormHandler 构 造 函 数 传递 一 个 selector， 而 这 个 selector 匹 配 index.html 中 <form> 元 素 。 

更 新 formhandlerjs， 为 FormHandLer 构 造 函 数 添加 一 个 名 为 seLector 的 参数 。 如 果 未 传人 
selLector， 则 抛 出 Error。 


(function (window) { 
"use Strict ' ， 
var App = window.App || {}; 
var $ = window,. jQuery 


function FormHandler(selector) { 


If (!selector) { 
throw new Error('No selector provided'); 
} 
} 


App.FormHandler = FormHandler; 
window.App = App; 


}) (window); 

Error 是 一 种 内 置 类 型 ， 可 以 明确 地 表示 代码 中 出 现 了 意外 的 值 或 条 件 。 但 目前 你 使 用 的 
Error 实 例 只 是 在 控制 台 打 印 出 消息 。 

保存 并 尝试 不 传递 参数 来 实例 化 一 个 新 的 FormHandler 对 象 ( 如 图 10-3 所 示 )。( 如 果 
browser-sync 尚 未 打开 ， 记 得 打开 。 ) 
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[R 口 Elements Console Sources Network Ti 





© top Preserve log 


» var formHandler = new App.FormHandler(); 
四 kUncaught Error: No selector provided(..) 
> | 


图 10-3 不 传递 参数 ， 实 例 化 FormHandler 


这 是 提高 FormHandler 复 用 性 的 第 一 步 。 在 Ottergram 中 ， 我 们 为 在 DOM 代 码 中 用 到 的 选择 
器 创建 了 变量 。 而 有 了 FormHandler 模 块 后 ,就 无 须 再 那么 做 了 。 相 反 ， 可 以 使 用 传递 给 构造 函 
数 的 selector 参 数 和 jQuery 来 找到 相应 的 元 素 。 

jQuery 常用 于 在 DOM 中 查找 元 素 。 要 做 到 这 一 点 ， 可 以 调用 jQuery 的 $ 函 数 ， 并 将 一 个 字符 
串 作 为 选择 器 传递 给 它 。 实 际 上 ， 使 用 它 的 方式 与 使 用 document .querySelectorAl1 的 方式 是 
相同 的 (尽管 jQuery 在 底层 的 工作 方式 不 同 , 这 一 点 稍 后 会 解释 ), 通常 我 们 称 之 为 使 用 jQuery“ 从 
DOM 中 选择 元 素 ”。 

在 formhandlerjs 中 声明 一 个 名 为 $formELement 的 实例 变量 , 然后 使 用 selector 在 DOM 中 找 
到 匹配 的 元 素 ， 再 将 结果 赋值 给 this .$formELement 。 


(function (window) { 
"use Strict'; 
var App = window.App || {}; 
var $ = window, jQuery 























function FormHandler(selector) { 
if (!selector) { 
throw new Error('No selector provided'); 


} 


this.$formELement = $(selector); 
} 


App.FormHandler = FormHandLer; 
window.App = App; 

}) (window) ; 

带 $ 前 级 的 变量 表示 这 个 变量 是 通过 jQuery 选择 出 来 的 元 素 。 虽 然 使 用 jQuery 时 不 是 必须 要 使 
用 这 个 前 级 ， 不 过 这 是 许多 前 端 开发 人 员 的 常见 书写 惯例 。 

当 使 用 jQuery 的 $ 函 数 来 选择 元 素 时 ， 它 并 不 会 像 document .querySelectorAl1 一 样 返回 
DOM 元 素 的 引用 ， 而 是 返回 单个 对 象 ， 而 该 对 象 中 会 包含 对 所 选 元 素 的 引用 。 这 个 对 象 同时 具 
有 操作 引用 和 集合 的 特殊 方法 ， 被 称 为 Query 封 装 集合 ”。 

接 下 来 ,要 确保 元 素 选择 器 成 功 地 从 DOM 检 索 到 了 一 个 元 素 。 如 果 未 查找 到 任何 元 素 ,jQuery 
将 会 返回 空 一 一 如 果 选 择 器 没有 匹配 到 任何 元 素 , 它 不 会 抛 出 一 个 异常 。 因 此 需要 手动 检查 一 下 ， 
因为 FormHandtLer 没 有 元 素 是 不 能 工作 的 。 

jQuery 封装 集合 的 长 度 可 以 告诉 我 们 有 多 少 个 匹配 元 素 。 更 新 formhandlerjs 来 检查 
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this.$formELement 的 Length 属 性 。 如 果 等 于 0， 则 抛 出 Error。 


(function (window) { 
"use strict'; 
var App = window.App || {}; 
var $ = window.jQuery; 





function FormHandler(selector) { 
if (!selector) { 
throw new Error('No selector provided'); 


} 
this.$formELement = $(selector); 
if (this.$formELement.Length === 0) { 
throw new Error('Could not find element with selector: ' + selector); 
} 


} 


App.FormHandler = FormHandler; 
window.App = App; 


}) (window) ; 





FormHandLer 构 造 函 数 会 根据 传人 的 seLector 人 参数 来 处 理 <form> 元 素 。 此 外 ， 它 还 使 用 实 
例 变 量 保 留 了 对 <form> 元 素 的 引用 ， 这 保证 了 代码 不 会 对 DOM 进 行 无 谓 的 遍历 ， 这 是 一 个 最 佳 
性 能 实践 。( 另 一 种 方法 是 一 次 次 地 调用 $ 来 重新 选择 相同 的 元 素 。) 


10.2 ”添加 提交 处 理 程序 


下 一 步 是 让 FormHandtLer 监 听 <form> 元 素 上 的 submit 事 件 ， 从 而 在 提交 时 执行 回调 函数 。 

为 了 提高 FormHandtLer 模 块 的 复 用 性 , 不 要 对 提交 处 理 程序 进行 硬 编码 ,而 是 写 一 个 接受 函 
数 参 数 的 方法 ， 添 加 一 个 提交 监听 器 ， 然 后 在 监听 器 的 内 部 调用 这 个 函数 参数 。 

首先 ， 在 formhandlerjs 添 加 一 个 名 为 addSubmithHandtLer 的 原型 方法 。 


























if (this.$formELement .Length === 0) { 
throw new Error('Could not find element with selector: ' + selector); 
} 
} 


FormHandler .prototype.addSubmitHandler = function () { 
console.log('Setting submit handler for form'); 

// 放置 要 运行 的 代码 

}; 


App.FormHandler = FormHandler; 





我 们 将 使 用 jQuery 的 on 方法 来 蔡 代 在 Ottergram 中 使 用 的 addEventListener 方 法 。 它 和 类 
addEventListener 类 似 ， 但 提供 了 更 大 的 便利 性 。 现 在 ， 通 过 使 用 addEventListener 的 方式 
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来 使 用 它 。( 下 一 章 将 用 到 on 提供 的 便利 性 。) 





if (this.$formELement .Length === 0) { 
throw new Error('Could not find eLement with selector: ' + selector); 
} 
} 


FormHandler.prototype.addSubmitHandler = function () { 
console.log('Setting submit handler for form'); 


this.s$formElement.on('submit', function (event) { 
event .preventDefault(); 
}); 
}; 








on 方法 接受 一 个 事件 名 称 ， 并 在 事件 被 触发 时 执行 回调 。 回 调 函 数 应 该 接受 该 事件 的 事件 对 
象 。 调 用 event.preventDefault 是 为 了 确保 用 户 提 交 表单 时 不 会 离开 CoffeeRun 页 面 。( 我 们 对 
Ottergram 中 的 缩 略 网 链接 做 了 同样 的 A 理 。) 


10.2.1 提取 数据 


提交 表单 时 ， 代 码 应 该 从 表单 中 读 取 用 户 的 和 输入， 然后 对 其 进行 处 理 。 在 formhandlerjs 的 提 
交 处 理 程序 中 , 创建 一 个 名 为 data 的 新 变量 , 并 为 它 赋 值 一 个 对 象 字面 量 , 确保 它 可 以 保存 表单 
中 每 个 元 素 的 值 。 

















FormHandler.prototype.addSubmitHandler = function () { 
console.log('Setting submit handler for form'); 
this.$formElement.on('submit', function (event) { 

event.preventDefault(); 


var data = $(this).serializeArray(); 
consoLe.Log(data) ; 
让 

}; 











在 提交 处 理 程序 的 回调 中 ，this 对 象 是 对 form 元 素 的 引用 。jQuery 提 供 了 一 个 便捷 的 方法 
( serializeArray ) 来 从 表单 获取 值 。 为 了 使 用 serializeArray， 需要 使 用 jQuery 包装 表单 。 
调用 $ (this) 会 返回 一 个 包装 对 象 ， 这 个 包装 对 象 可 以 使 用 serializeArray 方 法 。 

serializeArray 以 对 象 数 组 的 形式 返回 表单 数据 。 我 们 将 它 赋值 给 一 个 名 为 data 的 临时 
变量 ， 并 输出 到 控制 台 。 要 了 解 seriaLizeArray 的 输出 情况 ， 请 保存 文件 并 在 控制 台 运 行 以 
下 代码 : 


var fh = new App.FormHandler('[data-coffee-order="form"]'); 
fh.addSubmitHandler(); 


接 下 来 在 表单 中 填写 一 些 测 试 数据 ， 然 后 单 击 提交 按钮 ， 就 可 以 看 到 打印 到 控制 台 的 数组 。 


























194 第 10 章 使 用 JavaScript 处 理 表单 





单 击 对 象 数 组 旁边 的 > ， 会 看 到 如 图 10-4 所 示 的 内 容 。 





bd DD CoffeeRun x 


Sa localhost:3000/# 


ul 





[Ee 口 Elements Console Sources Network Timeline Profiles Resources » 1 
CoffeeRun © 可 top v QPreservelog 
> var fh = new App.FormHandler(' [data-coffee-order="form"] '); 
RESIN undefined 
soothing green tea > fh.addSubmitHandler(); 
Setting submit handler for form formhandler, js:19 
Email undefined 
not@me.com v [Object, Object, Object, Object, Object] formhandler. js:24 
v0: Object 
Short name: "coffee" 
© Tal value:; "soothing green tea" 
Pp_proto_: Object 
Grande v1: Object 
Flavor Shot name: "emailAddress" 
me value: "not@me.com" 
None v b__proto_: Object 
b 2: Object 
Caffeine Rating p> 3: Object 
2 b4: Object 
length: 5 


Submit Reset Pp__proto_: Array[0] 


>| 


图 10-4 ”serializeArray 将 表单 数据 作为 对 象 数 组 返回 
可 以 看 到 数组 中 每 个 对 象 都 有 一 个 对 应 于 <form> 元 素 的 name 属 性 的 键 名 ， 以 及 用 户 为 该 元 
素 提 供 的 键 值 。 
现在 可 以 遍历 数组 并 复制 每 个 元 素 的 值 。 在 formhandler.js 中 为 serializeArray 添 加 一 个 


forEach 方 法 ， 并 给 forEach 传 递 一 个 回调 方法 。 它 会 对 数组 中 的 每 个 对 象 执行 回调 并 使 用 相应 
对 象 的 name 和 vatLue 在 data 上 创建 一 个 新 属性 。 

















FormHandler.prototype.addSubmitHandler = function () { 
console.log('Setting submit handler for form'); 
this.s$formElement.on('submit', function (event) { 

event.preventDefault(); 


var data = $(this).serializeArrayO; {}; 

$(this).serializeArray().forEach(function (item) { 
data[item.name] = item.value; 
console.log(item.name + ' is ' + item.value); 

}); 

console.log(data); 


Fs 
}; 























要 查看 实际 效果 , 请 保存 修改 后 的 代码 , 并 在 填写 表单 之 前 , 在 控制 台 上 再 次 运行 测试 代码 : 


var fh = new App.FormHandler('[data-coffee-order="form"]'); 
fh.addSubmitHandler(); 


当 填 写 完 表 单 并 单 击 提交 按钮 后 , 应 该 能 看 到 输入 的 信息 被 复制 到 data 对 象 , 并 被 输出 到 控 
制 台 上 (如 图 10-$ 所 示 )。 
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© [DD CoffeeRun 二 
CC localhost:3000/# Vr es 
[4 是 Elements Console Sources Network Timeline Profiles Resources » X 
CoffeeRun @@ 可 top Preserve log 
> var fh = new App.FormHandler(' [data-coffee-order="form"] '); 
Coffee Order undefined 
the caff-fiend > fh.addSubmitHandler(); 
Setting submit handler for form formhandler, jis:19 
Email undefined 
oh@yeah.com coffee is the caff-fiend formhandler. js:26 
emailAddress is oh@yeah.com js; 
© Short size is short formh Tsjsi 
Tall flavor is formhandler, js:26 
Grande strength is 100 formhandler. js:26 
formhandler, is:28 
Flavor Shot Object {coffee: "the caff-fiend", emailAddress: "oh@yeah.com", size: "short", flavor: 
Re , strength: "100"} 
> 
Caffeine Rating 
| suomt | Reset 





10-5 ”表单 数据 在 迭代 的 回调 中 被 复制 





10.2.2 ”接受 并 调用 回调 函数 


既然 我 们 已 经 将 表单 数据 保存 为 了 一 个 对 象 ， 接 下 来 需要 将 这 个 对 象 传递 到 Truck 实例 的 
create0rder 方 法 中 。 但 是 FormHandtLer 无 法 访问 Truck 实例 。( 在 这 里 创建 一 个 新 的 Truck 实例 
也 并 不 明智 。) 

可 以 给 addSsubmitHandtLer 传 递 一 个 函数 参数 来 解决 这 个 问题 ， 这 个 函数 可 以 在 事件 处 理 程 
序 中 被 调用 。 

在 formhandlerjs 中 添加 一 个 名 为 fn 的 参数 。 





FormHandler.prototype.addSubmitHandler = function (fn) { 
console.log('Setting submit handler for form'); 
this.$formElement.on('submit', function (event) { 

event.preventDefault(); 


每 当 表单 的 submit 事 件 在 浏览 需 中 被 触发 时 ，submit 事 件 处 理 程序 回调 就 会 被 执行 。 此 时 ， 
我 们 期 望 调用 fn 函数 。 
在 formhandlerjs 的 提交 处 理 程序 回调 中 调用 fn， 并 把 包含 用 户 输入 的 数据 对 象 传递 给 fn。 

















FormHandler.prototype.addSubmitHandler = function (fn) { 


console.log(data); 
fn(data); 
}); 
}; 


当 一 个 FormHandtLer 实 例 被 创建 后 ， 就 可 以 给 addsubmitHandtLer 传 递 任何 回调 了 。 于 是 只 
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要 表单 被 提交 ， 回 调 函 数 就 会 被 调用 ， 并 会 将 用 户 在 表单 中 输入 的 数据 传递 给 该 回调 函数 。 
10.3 ”使 用 FormHandLer 


我 们 需要 在 mainjs 中 实例 化 一 个 FormnHandter 实 例 ， 并 把 <form> 元 素 的 选择 需 
[data-coffee-order="form"] 传 递 给 它 。 在 main.js 的 顶部 为 此 选择 器 创建 一 个 变量 ,以 便 在 需 
要 时 可 以 重复 使 用 。 


(function (window) { 
"use strict',; 
var FORM SELECTOR = '[data-coffee-order="form"]'; 
var App = window.App; 








接 下 来 创建 一 个 名 为 FormHandtLer 的 局 部 变量 并 为 其 研 值 App .FormHandler。 


(function (window) { 
"use Strict ' ， 
var FORM SELECTOR = '[data-coffee-order="form"]'; 
var App = window.App; 
var Truck = App.Truck; 
var DataStore = App.DataStore; 
var FormHandler = App.FormHandler; 
var myTruck = new Truck('ncc-1701', new DataStore()); 








在 main.js 模 块 的 末尾 使 用 FORM_SELECTOR 作 为 参数 调用 FormHandler 构 造 函 数 , 这 样 可 以 确 
保 FormHandtLer 实 例 与 选择 器 选 出 的 DOM 元 素 绑 定 在 一 起 。 再 将 这 个 实例 赋值 给 一 个 名 为 
FormHandLer 的 新 变量 。 





var Truck = App.Truck 

var DataStore = App.DataStore; 

var FormHandler = App.FormHandler; 

var myTruck = new Truck('ncc-1701', new DataStore()); 
window.myTruck = myTruck; 

var formHandler = new FormHandler(FORM SELECTOR); 


formHandler.addSubmitHandler(); 
console.log(formHandler); 
}) (window); 


保存 代码 并 返回 浏览 器 ， 控 制 台 应 该 输出 了 Setting submit handler for form， 这 表示 
在 页 面 加 载 完 成 之 后 addSubmitHandler 被 调用 了 。 但 如 果 我 们 现在 填写 并 提交 表单 ， 它 会 报错 
(如 图 10-6 所 示 )。 
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bd D CoffeeRun x “二 二 
cd localhost:3000 ?| 三 
民品 Elements Console Sources Network Timeline Profiles » @1 x 
CoffeeRun © YF tiop v QPreservelog 
Goffee Ord Setting submit handler for form formhandter.js:19 
offee Order SR 
bp FormHandler {$formElement: Nn.fn.init[1]} main,js:17 
espressssssssso000000000000h! coffee is espresssssssssoo00000000000h! formhandler. js:26 
Eeell emailAddress is yeah@boyeeee.com formhandler.is:26 
mail 
size is tall ri 1er,is:2 
yeah@boyeeee.com flavor is mocha formhandler. is:26 
strength is 55 formhandler, js:26 
Short re 
formhandler. js:28 
© Tall Object {coffee: "espresssssssssoo00000000000h!", emailAddress: "yeah@boyeeee.com", 
Grarnds size: "tall", flavor: "mocha", strength: "55"} 
@ Uncaught TypeError: fn is not a function formhandler.is:30 
Flavor Shot > 
Mocha 四 
Caffeine Rating 

















图 10-6 ”在 页 面 加 载 后 调用 addSubmitHandler 


这 是 因为 我 们 没有 向 addSubmitHandtler 传 递 任 何 内 容 ， 下 一 节 将 纠正 这 个 错误 。 





将 create0rder 注 册 为 提交 处 理 程序 


我 们 希望 每 次 发 生 submit 事 件 时 都 调用 create0rder ， 但 是 我 们 不 能 只 传递 一 个 
create0rder 的 引用 到 formHandler.addSubmitHandler, 因 create0rder 在 事件 处 理 回调 中 
被 调用 时 ， 它 的 所 有 者 会 有 所 变化 。 此 时 ，create0rder 内 部 的 this 将 不 再 是 Trunk 实 例 ， 这 导 
致 了 create0rder 运 行 时 报错 。 

应 该 把 myTruck.create0rder 的 所 有 者 绑 定 为 myTruck ， 然 后 再 把 这 个 函数 传 给 
formHandler.addSubmitHandler。 

保存 修改 后 的 main.js， 确 保 已 经 对 方法 进行 了 绑 定 以 保证 其 所 有 者 为 myTruck。 























window.myTruck = myTruck; 
var formHandler = new FormHandler(FORM SELECTOR); 


formHandler.addSubmitHandler (myTruck.createOrder.bind(myTruck)); 
console.log(formHandler); 
}) (window); 


我 们 能 对 原始 原型 方法 的 定义 使 用 bind 么 ? 定义 原型 方法 时 ， 只 能 在 方法 内 部 访问 实例 。 
bind 要 求 我 们 提供 被 调用 函数 的 预期 所 有 者 的 引用 一 一 一 个 必须 能 在 方法 体外 使 用 的 引用 。 由 于 
我 们 无 法 在 方法 体外 获取 引用 实例 ， 所 以 无 法 对 原始 原型 方法 使 用 bind。 

保存 修改 并 填写 表单 。 提 交 表 单 后 ，myTruck.print0rders 方 法 应 该 可 以 被 调用 ， 填 写 的 
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数据 也 就 可 以 被 添加 到 如 图 10-7 所 示 的 订单 泻 染 列表 中 。 


站 
a 


@@@ ， 口 coftesnun x 








€ 名 | 口 localhost:3000 








[x 帅 Elements Console Sources Network Timeline Profiles Resources » x 
CoffeeRun Oiop Preserve log 
Setting submit handler for form formhandler.is:19 
Coffee Order Pr 
bk FormHandler {$formElement: n.fn.init[1]} main.js:17 
ambrosia coffee is ambrosia formhandter.js:26 
Enall emailAddress is z@olympus.com formhandler.js:26 
ma 
size is grande formhandler.is:26 
z@olympus.com flavor is caramel formhandler.js:26 
_ strength is 52 formhandler.is:26 
Short formhandLer.js:28 
站 Tall Object {coffee: "ambrosia", emailAddress: "z@olympus.com", size: "grande", flavor: 
"caramel", strength: "52"} 
© Grande = 
Adding order for z@olympus,.com truck, js:13 
Flavor Shot > 
Caramel $ 
Caffeine Rating 
| Submit | Reset 














pa 








10-7 ”提交 表单 时 create0rder 被 调用 














10.4 UI 优化 


如 果 提 交 表 单 之 后 , 旧 数 据 能 够 被 清除 , 那么 用 户 便 可 以 立即 输入 下 一 个 订单 一 一 这 将 是 
个 不 错 的 优化 。 重 置 表单 就 像 调 用 <form> 的 reset 方 法 一 样 简单 。 

在 formhandler.js 中 找到 FormHandler.prototype.addSubmitHandler 方 法 。 在 this. $form- 
ELement .on('submit'.) 回调 函数 的 末尾 调用 表单 的 reset 方 法 。 





FormHandler.prototype.addSubmitHandler = function (fn) { 
console.log('Setting submit handler for form'); 
this.$formElement.on('submit', function (event) { 

event.preventDefault(); 


var data = {}; 

$(this).serializeArray().forEach(function (item) { 
data[item.name] = item.value; 
console.log(item.name + ' is ' + item.value); 

}); 

console.log(data); 

fn(data); 

this. reset(); 

}); 
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保存 修改 ， 并 在 表单 中 填写 一 些 数据 。 提 交 表单 时 ， 数 据 已 经 被 清除 。 

最 后 再 为 UI 做 一 个 调整 。 就 像 在 上 一 章 中 所 看 到 的 ， 当 表单 可 以 输入 数据 的 时 候 ， 它 会 被 聚 
焦 。 为 了 让 表单 的 特定 字段 被 聚焦 ， 可 以 调用 它 的 focus 方 法 。( 给 咖啡 订单 添加 的 autofocus 
属性 只 会 在 网 页 首次 加 载 时 有 效 。) 

可 以 通过 表单 的 elements 属 性 轻松 获得 各 个 表单 字段 elements 是 表单 字段 数组 , 可 以 从 0 
开始 索引 并 引用 。 

在 formhandlerjs 的 提交 处 理 程序 回调 中 调用 this. reset 之 后 ， 在 表单 第 一 个 字段 上 调用 
focus 方 法 。 



































FormHandler.prototype.addSubmitHandler = function (fn) { 
console.log('Setting submit handler for form'); 
this.$formElement.on('submit', function (event) { 

event.preventDefault(); 


var data = {}; 
$(this).serializeArray().forEach(function (item) { 
data[item.name] = item.value; 
console.log(item.name + ' is ' + item.value); 
}); 
console.log(data); 
fn(data); 
this.reset(); 
this.elements[0] .focus(); 
}); 
}; 





CoffeeRun 现 在 得 到 了 jQuery 的 强力 支持 并 且 可 以 接受 用 户 输入 了 ! 这样 HTML 和 JavaScript 
模块 之 间 的 联系 便 建立 了 起 来 。 在 下 一 章 中 , 我 们 将 基于 从 表单 中 获取 的 数据 来 创建 交互 式 DOM 
元 素 ， 从 而 完成 蓝图 。 


10.5 ”初级 挑战 :添加 超级 尺寸 


为 咖啡 订单 添加 男 一 个 杯 型 选项 个 响亮 的 名 字 ， 例 如 “ 哥 斯 拉 咖 啡 ”。 
用 特大 杯 型 来 添加 一 个 新 订单 ， 并 在 控制 台 检查 应 用 程序 数据 ， 确 保 数 据 能 够 正确 保存 。 


10.6 ”中 级 挑战 : 当 滑 块 滑动 时 显示 其 数值 


为 滑 块 的 change 事 件 创建 处 理 程 序 。 当 滑 块 滑动 时 ， 在 Label 标 签 旁 边 显示 相应 的 数字 。 
作为 额外 挑战 ， 要 通过 改变 数字 (或 者 Label 标 签 ) 的 颜色 来 反应 咖啡 的 浓度 一 一 用 绿色 表 
示 淡 咖啡 ,用 黄色 表示 常规 浓度 的 咖啡 ,用 红色 表示 非常 浓 的 咖啡 。 
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10.7 ”高 级 挑战 ， 添加 选择 


当 用 户 提交 一 个 最 大 杯 、 最 高 浓度 的 调味 咖啡 订单 时 ,他 会 解锁 成 就 一 一 弹出 一 个 Bootstrap 
模 态 框 让 他 确认 选择 的 浓度 和 口味 。 此 外 ， 还 会 询问 他 是 否 坚 持 自 己 的 选择 。 如 果 是 的 话 ， 在 邮 
箱 字段 已 经 输入 内 容 的 情况 下 , 再 添加 一 个 额外 的 表单 字段 。 这 个 字段 允许 他 定制 自己 想 要 的 咖 
啡 ， 例 如 打发 时 间 型 、 心 灵 阅 读 型 或 者 解决 问题 型 咖啡 。 

有 关 如 何 包含 和 触发 Bootstrap 的 模 态 行为 ， 请 参阅 getbootstrap.conyjavascript 上 的 文档 。( 需 
要 添加 一 个 <script> 标 签 来 引用 cdnjs.com 上 Bootstrap 的 JavaScript。) 






























































从 数据 到 DOM 








在 上 一 章 中 , 我 们 构建 了 FormHandLer 模 块 ， 它 在 与 用 户 交互 的 表单 和 其 他 代码 之 间 搭 建 了 
沟通 的 桥梁 。 通 过 拦截 表单 的 提交 事件 ， 将 用 户 的 输入 提交 到 Trunk 模 块 ，Trunk 模 块 再 把 数据 
保存 到 DataStore 实 例 。 

这 一 章 将 构建 男 一 段 UI 代 码 一 一 CheckList 模 块 和 Truck 模 块 一 样 , 它 也 会 从 FormHandler 
模块 中 接受 数据 , 但 它 主要 专注 于 将 待 处 理 的 订单 添加 到 页 面 的 清单 上 。 当 这 个 清单 中 的 任意 一 
项 被 点 击 时 ，CheckList 模 块 就 把 它 从 页 面 中 移 除 ， 同 时 通知 Truck 模 块 将 该 订单 从 DataStore 
中 移 除 。 图 11-1 显 示 了 配备 有 待 处 理 订单 清单 的 CoffeeRun。 








© | [coeeRun x 


Cs C localhost:3000 


CoffeeRun 


Coffee Order 








Email 
dr@who.com 
Short 


© Tall 
Grande 


Flavor Shot 
None 


Caffeine Rating 


ee 





Submit Reset 


Pending Orders: 


Intravenous caffeine drip, (caquino@bignerdranch.com) [100] 


图 11-1 让 订单 来 得 更 多 一 些 吧 
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11.1 建立 清 


我 们 将 继续 使 用 Bootstrap 类 来 设置 表单 元 素 的 样式 。 从 index.html 开 始 ， 像 制作 咖啡 订单 表 
单 时 那样 , 添加 类 名 为 panel panel-default 的 <div>, 并 在 其 内 部 定义 一 个 类 名 为 panel-body 
的 <div>。 再 在 它们 内 部 添加 一 个 标题 和 男 一 个 用 于 展示 清单 项 的 <div>。 而 这 整个 类 名 为 panel 
panel-default 的 <div> 标 记 ， 应 该 添加 在 表单 之 后 。 














<header> 
<h1>CoffeeRun</h1> 
</header> 
<Section> 
<div class="panel panel-default"> 
<div class="panel-body"> 
<form data-coffee-order="form"> 
</form> 
</div> 
</div> 


<div class="panel panel-default"> 
<div class="panel-body"> 
<h4>Pending Orders:</h4> 
<div data-coffee-order="checklist"> 
</div> 
</div> 
</div> 
</section> 








和 之 前 一 样 ， 使 用 <div> 标 签 来 展现 Bootstrap 的 样式 。 清 单 的 主体 部 分 是 [data-coffee- 
order="checklist"] 元 素 。 在 Javascript 创 建 单个 咖啡 订单 后 , 它 将 作为 在 DOM 上 展示 清单 项 的 


目标 元 素 。 
保存 index.html， 启动 browser-sync, 检查 一 下 CoffeeRun 是 否 显 示 了 一 个 空 的 待 处 理 订单 清单 


区 域 ( 如 图 11-2 所 示 )。 

















Submit Reset 


Pending Orders: 


图 11-2 ”添加 清单 项 标记 之 后 


现在 可 以 回归 JavaScript 了 。 
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11.2 创建 CheckList 模块 


在 scripts 文 件 夹 中 创建 一 个 名 为 checklist.js 的 新 文件 , 并 在 index.html 中 添加 一 个 <script> 
链接 。 


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js" 
charset="utf-8"></script> 

<script src="scripts/checklist.js" charset="utf-8"></script> 

<script src="scripts/formhandler.js" charset="utf-8"></script> 

<script src="scripts/datastore.js" charset="utf-8"></script> 

<script src="scripts/truck.js" charset="utf-8"></script> 

<script src="scripts/main.js" charset="utf-8"></script> 


首先 保存 index.html ， 在 checklistjs 中 添加 标准 的 IFE 模 块 代码 ; 然后 导入 App 命 名 空间 和 
jQuery， 并 将 它们 赋值 给 一 个 局 部 变量 ; 接 下 来 为 CheckList 创 建 一 个 构造 函数 ， 记 住 要 为 构造 
函数 传递 一 个 selector 参 数 ， 并 且 这 个 selector 参 数 要 至 少 能 够 匹配 DOM 中 的 一 个 元 素 。 在 
IFE 的 最 后 ， 将 CheckList 构 造 函 数 导 出 为 App 命 名 空间 的 一 部 分 。 


(function (window) { 
"use strict'; 








var App = window.App || {}; 
var $ = window.jQuery; 


function CheckList(selector) { 
if (!selector) { 
throw new Error('No selector provided'); 


} 
this.s$element = $(selector); 
if (this.$eLement.Length === 0) { 
throw new Error('Could not find element with selector: ' + selector); 
} 
} 


App.CheckList = CheckList; 
window.App = App; 
}) (window); 


CheckList 模 块 需要 3 个 方法 来 完成 其 工作 : 第 1 个 负责 创建 一 个 清单 项 ， 这 个 清单 项 包括 了 
复 选 框 和 描述 文本 。 可 以 将 清单 项 视 为 table 中 的 一 行 。 第 2 个 方法 会 从 table 中 移 除 一 行 。 第 3 个 方 
法 会 为 单 击 事件 添加 一 个 监听 器 ， 从 而 让 代码 知道 何 时 需要 移 除 一 行 。 

现在 要 处 理 的 第 1 个 方法 会 为 新 订单 创建 新 的 一 行 。 图 11-3 展 示 了 CheckList 如 何在 提交 表 
单 时 将 清单 项 添加 到 页 面 上 。 
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FormHandler Truck | DataStore 

1 1 
1 上 

CheckList | 1 
[一 一 create0rder() -请 | 

| | | 一 0 一 
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-一 addRow() 一 


二 


新 建 























站 


DOM 元 素 
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1 
1 
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1 
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1 
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图 11-3 ”提交 订单 表单 时 的 订单 事件 














11.3 ”创建 行 构造 函数 


我 们 不 能 在 index.html 中 直接 为 清单 项 创建 标记 ， 因 为 为 了 响应 表单 提交 事件 ， 它 们 需要 在 
页 面 浑 染 之 后 再 被 添加 。 所 以 ， 要 在 CheckList 模 块 添加 一 个 Row 构造 函数 。 

Row 构造 函数 将 负责 创建 所 有 用 于 表示 单个 咖啡 订单 的 DOM 元 素 ,包括 复 选 框 和 描述 文本 。 
但 是 Row 构造 函数 并 不 会 被 导出 到 App 命 名 空间 ， 它 只 会 被 CheckList.prototype 内 部 的 方法 
使 用 。 

在 checklistjs 中 的 App .CheckList = CheckList; 之 前 添加 Row 构造 函数 ， 它 应 该 接受 一 个 
名 为 coffee0rder 的 参数 。coffee0rder 与 传递 给 Truck.prototype.create0rder 的 数据 是 相 
同 的 。 








this.$eLement = $(selector); 
if (this.$eLement ,Length === 0) { 
throw new Error('Could not find element with selector: ' + selector); 
} 
} 


function Row(coffeeOrder) { 
// 放置 要 运行 的 构造 函数 代码 


App.CheckList = CheckList; 
window.App = App; 
}) (window) ; 





使 用 jQuery 创建 DOM 元 素 











Row 构造 函数 会 使 用 jQuery 来 构建 DOM 元 素 。 我 们 应 该 为 组 成 清单 项 的 各 个 元 素 声明 变量 。 
然后 ， 如 图 11-4 所 示 , 构造 函数 会 将 它们 一 起 添加 到 DOM 元 素 的 子 树 中 。CheckList 将 会 获取 该 
子 树 ， 并 将 其 作为 [data-coffee-order="checkList"] 元 素 的 子 元 素 附 加 到 页 面 的 DOM 树 上 。 


body 
CheckList 
| | <div class="panel panel-default"> 
\ 
\ 
\ 





<div class="panel panel-default"> 
</div> 


</div> 




















<div class="panel-body"> 
</div> 


创建 














<div data-coffee-order="checkbox" 
1 class="checkbox"> 
| /div> 

















<div data-coffee-order="checklist"> 
</div> 











<label> 





<input “tall mocha iced coffee, 
! | type="checkbox"/> (chewie@rrwwwgg.com) [39x]” 
1 




















SEP EN ERE TERRE ERP 














~ | | a 
图 11-4 ”CheckList 创 建 一 行 并 将 其 添加 到 DOM 元 素 上 
( 订单 描述 信息 中 的 “[39x]” 表 示 咖 啡 因 的 浓度 。) 

由 图 11-4 的 Row 构造 函数 所 创建 的 DOM 子 树 等 同 于 以 下 标记 : 


<div data-coffee-order="checkbox" class="checkbox"> 
<label> 














<input type="checkbox" value="chewie@rrwwwgg.com"> 


tall mocha iced coffee, (chewie@rrwwwgg.com) [39x] Co 
</label> 
</div> 


一 个 带 有 类 名 checkbox 的 <div> 会 被 用 于 容纳 <LabeL> 和 <input> 元 素 。checkbox 类 会 让 


<div> 采 用 适当 的 Bootstrap 样 式 。 当 我 们 在 复 选 框 上 触发 单 击 操作 时 ，Javascript 代 码 会 使 用 
data-coffee-order 属 性 。 





注意 ，<input> 的 type 属 性 也 需要 是 checkbox， 这 让 浏览 器 把 输入 框 绘制 为 复 选 框 表单 元 
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素 。 订 单 的 纯 文本 描述 紧 跟 在 <input> 之 后 。<label> 元 素 包含 了 复 选 框 和 纯 文本 描述 ， 这 将 使 
文本 和 输入 框 都 成 为 复 选 框 的 可 点 击 范围 。 

我 们 每 次 都 会 创建 <label>、<div> 和 <input> 元 素 ， 然 后 手动 将 其 租 套 以 构建 一 个 DOM 子 
树 。 稍 后 我 们 会 将 这 个 DOM 子 树 附 加 到 活动 DOM ( 页 面 上 当前 显示 的 DOM ) 上 。 另 外 ， 还 要 创 
建 一 个 用 于 保存 订单 的 描述 文本 的 字符 串 ， 例 如 “tall mocha iced coffee, (chewie@rrwwwgg.com) 
[39x]”。 

为 了 创建 这 些 元 素 ， 使 用 jQuery 的 $ 函 数 。 到 目前 为 止 ， 我 们 只 使 用 $ 函 数 从 DOM 中 选择 过 
元 素 ， 其 实 它 也 可 以 用 来 创建 元 素 。 

首先 ， 在 checklist.js 里 的 Row 构 造 函 数 中 调用 $ 函 数 来 创建 一 个 <div> 元 素 ， 癌 它 传递 两 个 用 
于 描述 将 要 创建 的 DOM 元 素 的 参数 。 第 一 个 参数 为 DOM 元 素 的 HTML 标 签 ， 本 例 中 则 是 
'<div></div>'。 第 二 个 参数 为 jQuery 应 该 添加 到 <div> 上 的 属性 对 象 ， 对 象 的 键 值 对 会 被 转化 
为 新 元 素 的 属性 。 

它 返 回 的 结果 是 一 个 由 jQuery 创建 的 DOM 元 素 ， 我 们 将 它 赋 值 给 一 个 名 为 $div 的 新 变量 。 
这 并 不 是 一 个 实例 变量 (也 就 是 说 ， 它 只 是 $div 而 不 是 this. $div )，$ 前 级 表示 它 不 是 一 个 纯 
DOM 元 素 ， 而 是 jQuery 创建 的 一 个 引用 。 

在 checklistjs 中 这 样 做 : 























































































































function Row(coffeeOrder) { 


var $div = $('<div></div>', { 
'data-coffee-order': 'checkbox', 
'class': 'checkbox' 

}); 

} 























请 注意 , 两 个 属性 名 称 要 使 用 单 引 号 。 你 也 许 认为 在 使 用 jQuery 创建 DOM 元 素 时 ,应 该 始终 
对 属性 名 使 用 单 引号 。 然 而 事实 并 非 如 此 。 具 有 特殊 字符 ( 如 破 折 号 ) 的 属性 名 称 需 要 用 引号 包 
庄 ， 和 否则 会 被 视 为 语法 错误 。 而 使 用 字符 表 中 的 字母 、 数 字 、 下 划 线 ( _ ) 和 美元 符号 ($ ) 作为 
属性 名 称 〈 或 者 变量 名 称 ) 的 有 效 字 符 时 ， 可 以 不 使 用 单 引号 。 

'class ' 在 单 引号 中 是 因为 class 是 一 个 JavaScript 保 留 字 ， 因 此 需要 使 用 单 引 号 来 防止 浏览 器 
以 JavaScript 形 式 对 其 进行 解析 ( 如 果 不 使 用 单 引 号 也 会 导致 语法 错误 )。 

接 下 来 ， 在 checklist.js 中 使 用 $ 函 数 创建 <Llabel> 元 素 , 但 是 不 使 用 对 象 参数 ， 因 为 它 不 需要 
额外 的 属性 。 





















































function Row(coffeeOrder) { 
var $div = $('<div></div>', { 
"data-coffee-order': 'checkbox', 
'class': "Checkbox' 
}); 


\ 


11.3 创建 行 构造 函数 207 


~ 





var $label = $('<LabeL></LabeL> ' ) ; 
} 





现在 ,调用 $ 函 数 并 为 其 传递 一 个 <input>HTML 标 签 , 从 而 为 复 选 框 创建 一 个 <input> 元 素 。 
将 第 二 个 参数 的 type 指 定 为 checkbox，vatLue 指 定 为 客户 的 邮箱 地 址 。 因 为 这 些 属性 名 称 都 没 
有 使 用 特殊 字符 ， 所 以 不 必 将 它们 放 在 单 引号 之 中 。 








function Row(coffeeOrder) { 
var $div = $('<div></div>', { 
'data-coffee-order': 'checkbox', 
'class': 'checkbox' 


}); 
var $label = $('<label></label>'); 


var $checkbox = $('<input></input>', { 
type: 'checkbox', 
value: coffeeOrder.emailAddress 
}); 
} 


通过 将 value 的 值 设置 为 客户 的 邮箱 地 址 ， 可 以 把 复 选 框 和 客户 的 咖啡 订单 关联 起 来 。 在 稍 
后 添加 单 击 处 理 程 序 时 ， 可 以 根据 value 属 性 中 的 邮箱 地 址 来 判断 哪个 咖啡 订单 被 点 击 过 。 

最 后 要 创建 的 是 在 复 选 框 旁边 显示 的 描述 文本 , 你 将 使 用 += 运 算 符 连接 信息 片段 为 它 构成 一 
个 字符 串 。 

在 checklistjs 中 创建 一 个 名 为 description 的 变量 ， 并 将 其 设置 为 订单 的 size 属 性 。 接 着 ， 
添加 逗号 和 空格 。 如 果 提 供 了 口味 ( flavor )， 就 使 用 += 连 接 它 们 。 然 后 再 连接 咖啡 (coffee)、 
邮箱 地 址 (emailAddress ) 和 浓度 (strength ) 值 。emailAddress 应 该 使 用 小 括号 包 起 来 ， 
而 浓度 〈( strength ) 则 应 该 使 用 中 括号 包 起 来 ， 且 后 面 跟着 字母 x。( 添加 小 括号 和 中 括号 不 
因为 语法 需要 ， 只 是 为 了 格式 化 文本 。) 
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function Row(coffeeOrder) { 


var $checkbox = $('<input></input>', { 
type: 'checkbox', 
value: coffeeOrder.emailAddress 


3 


var description = coffeeOrder.size + ' '; 
if (coffee0rder.fLavor) { 
description += coffeeOrder.flavor + ' '; 


} 


description += coffeeOrder.coffee + ', '; 
description += ' (' + coffeeOrder.emailAddress + ')'; 
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description += ' [' + coffeeOrder.strength + 'x]'; 
} 





二 连接 运算 符 在 一 个 步骤 中 同时 执行 了 拼接 和 赋值 两 个 操作 ， 这 意味 着 以 下 两 行 代码 是 等 价 的 : 


description += coffeeOrder.flavor + ' '; 
description = description + coffeeOrder.flavor + ' '; 


有 了 清单 项 的 所 有 组 成 部 分 后 ， 就 可 以 将 它们 租 套 了 。( 如 图 11-5 所 示 ) 








<div data-coffee-order="checkbox"class="checkbox"> 
<div> 














"tall mocha iced coffee, (chewie@rrwwwgg.com)[39x]" 




































































<label> 
<input type="checkbox"/> 
<div data-coffee-order="checkbox"class="checkbox"> 
<div> 
<label> 
<input type="checkbox"/> "tall mocha iced coffee, (chewie@rrwwwgg.com)[39x]" 




















图 11-5 将 各 个 DOM 元 素 组 合 到 子 树 中 





分 3 步 来 完成 此 操作 。 
(1) 把 $checkbox 追 加 到 $label 中 。 
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(2) 把 description 追 加 到 $Labet 中 。 

(3) 把 $LabetL 追 加 到 $div 中 。 

一 般 来 说 ， 会 按照 从 左 到 右 ， 从 下 到 上 的 顺序 来 构建 子 树 。 这 种 方法 和 我 们 在 第 3 章 中 为 
Ottergram 书 写 CSS 时 的 规则 类 似 一 一 从 最 小 的 元 素 开始 ， 从 内 向 外 的 书写 。 

在 checklistjs 中 使 用 jQuery 的 append 方 法 将 元 素 连 接 在 一 起 。 此 方法 接受 DOM 元 素 或 者 
jQuery 封装 集合 作为 参数 ， 并 将 其 添加 为 调用 者 的 子 元 素 。 











function Row(coffeeOrder) { 


description += coffeeOrder.coffee + ' 
description += ' (' + coffeeOrder.emailAddress + ')'; 
description += ' [' + coffeeOrder.strength + 'x]'; 


$label .append($checkbox); 
$label .append (description); 
$div.append ($label); 

} 





现在 的 Row 构造 函数 已 经 可 以 使 用 传人 的 咖啡 订单 数据 创建 并 组 装 元 素 的 子 树 了 。 然 而 ， 
为 Row 将 被 当 作 构造 函数 而 不 是 普通 函数 , 所 以 它 不 能 简单 地 返回 这 个 子 树 。( 实际 上 , 构造 函数 
永远 不 应 该 有 return 语 句 。 当 对 构造 了 数 使 用 new 时 ，JavaScript 会 自动 返回 一 个 值 。) 

但 是 可 以 在 checklistjs 中 把 子 树 赋值 给 this .$eLement , 并 将 其 当 作 实例 的 属性 来 访问 。( 选 
择 此 名 称 只 是 为 了 遵循 其 他 构造 函数 的 约定 ， 它 本 身 没 有 任何 特殊 的 含义 。) 
























































function Row(coffeeOrder) { 


$label .append($checkbox); 
$label .append(description); 
$div.append ($label); 


this.$eLement = $div; 
} 


Row 构造 函数 现 已 准备 就 绪 ， 可 以 使 用 它 构建 带 复 选 框 的 DOM 子 树 来 表示 每 个 咖啡 订单 。 这 
个 DOM 子 树 被 保存 在 了 一 个 实例 变量 中 。 
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接 下 来 向 CheckList 添 加 一 个 方法 ， 该 方法 使 用 Row 构造 本 数 创建 Row 实例 。 它 会 将 每 个 Row 
实例 的 $element 添 加 到 页 面 的 活动 DOM 上 。 

在 checklistjs 中 给 CheckList.prototype 添 加 一 个 addRow 方 法 ， 此 方法 接受 coffee0rder 
参数 ， 它 是 一 个 包含 单个 咖啡 订单 所 有 数据 的 对 象 。 
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在 这 个 新 方法 中 , 调用 Row 构造 函数 , 并 向 其 传人 coffee0rder 参 数 , 从 而 创建 一 个 新 的 Row 
实例 ;再 把 新 创建 的 实例 赋值 给 变量 rowELement; 然后 ， 将 rowELement 的 $eLement 属 性 ( 它 








包含 了 DOM 子 树 ) 附加 到 checkList 实 例 的 $element 








属性 〈 它 是 对 清单 项 容器 的 引用 ) 上 。 


function CheckList(selector) { 
} 
CheckList.prototype.addRow = function (coffee0rder) { 


// 使 用 咖啡 订单 信息 创建 一 个 新 的 Row 实例 
var rowELement = new Row(coffee0rder) ; 


// 把 新 的 Row 实例 的 $eLement 属 性 添加 到 清单 中 
this .$eLement.append (rowElement. $element); 


}; 


function Row(coffeeOrder) { 


以 上 就 是 将 Row 的 DOM 子 树 添加 到 页 面 上 所 要 做 的 所 有 工作 。 保 存 checklist.js。 
在 main.js 中 将 匹配 整个 清单 区 域 的 [data-coffee-order="checklist"] 选 择 器 赋值 到 一 














个 变量 上 。 然 后 ， 把 CheckList 模 块 从 APP 命 名 空间 导入 到 本 地 变量 CHECKLIST_SELECTOR 中 。 








(function (window) { 
"use strict',; 
var FORM SELECTOR = '[data-coffee-order="form"]'; 
var CHECKLIST SELECTOR = '[data-coffee-order="checklist"]'; 
var App = window.App; 
var Truck = App.Truck; 
var DataStore = App.DataStore; 
var FormHandler = App.FormHandler; 
var CheckList = App.CheckList; 
var myTruck = new Truck('ncc-1701', new DataStore()); 


现在 就 可 以 实例 化 一 个 CheckList 实 例 来 添加 咖啡 清单 了 。 
你 可 能 会 试图 添加 另 一 个 对 formHandtLer.addSsubmitHandtLer 的 调用 ， 但 是 结果 不 会 如 你 








所 愿 。 为 什么 呢 ? 这 是 因为 每 次 调用 addSubmitHandtLer 时 ， 它 都 会 注册 一 个 新 的 回调 函数 并 重 
置 表单 (通过 调用 this .reset )。 











想 想 下 面 的 代码 : 


// 实例 化 一 个 新 的 CheckList 类 型 
var checkList = new CheckList(CHECKLIST SELECTOR) ; 


var formHandler = new FormHandler(FORM SELECTOR) ， 
formHandler.addSubmitHandler(myTruck.createOrder.bind(myTruck)); 


// 这 并 不 会 按照 你 所 预想 的 执行 
formHandler.addSubmitHandler(checkList.addRow.bind(checkList)); 
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这 段 代 码 注 册 了 两 个 回调 函数 ， 它 们 会 在 表单 提交 时 执行 。 在 第 一 个 提交 处 理 程 序 
(myTruck.createOrder ) 被 调用 后 , 表单 被 重 置 。 在 第 二 个 提交 处 理 程序 ( checkList.addRow ) 
被 调用 后 ， 表 单 中 并 没有 留 下 任何 信息 。 这 样 会 导致 虽然 数据 被 添加 到 了 Datastore， 但 是 没有 
任何 一 个 清单 项 被 添加 到 页 面 上 。 

为 了 解决 这 个 问题 ， 需 要 单独 传递 一 个 匿名 本 数 到 formHandLer.addSubmitHandter 中 ， 
而 该 匿名 函数 会 调用 myTruck.create0rder 和 checkList.addRow。 

此 外 ， 这 些 方法 都 需要 绑 定 到 特定 的 实例 上 (这 意味 着 需要 设置 this 值 )。 虽 然 我 们 已 经 学 
会 了 如 何 使 用 bind 来 设置 this， 但 是 这 里 会 采用 别 的 方法 。 


使 用 call 绑 定 this 


使 用 cal1 与 使 用 bind 设 置 this 值 的 方法 类 似 。 两 者 的 区 别 是 ，bind 返 回 一 个 新 版 本 的 函数 
或 者 方法 ,但 并 不 会 立即 执行 它 ; 而 call 实 际 上 会 调用 返回 的 函数 或 者 方法 ， 并 允许 将 this 设 
置 为 传人 的 第 一 个 参数 。( 如 果 需 要 将 其 他 的 参数 也 传递 到 函数 中 ， 只 需要 将 额外 参数 添加 到 参 
数列 表 中 即 可 。) call 会 运行 函数 体 ， 并 返回 函数 的 返回 值 。 

这 里 需要 使 用 的 是 call 而 不 是 bind ， 因 为 除了 设置 this 值 之 外 ， 还 要 调用 myTruck. 
create0rder 和 checkList.addRow。 

在 mainjs 中 删除 formHandler.addSubmitHandler 的 现 有 调用 ， 添 加 formHandler. 
addSsubmitHandtLer 的 新 调用 方式 ， 并 传人 一 个 匿名 函数 。 这 个 匿名 函数 具有 一 个 data 形 参 。 在 匿 
名 函数 中 使 用 catLL 方 法 设置 myTruck.create0rder 和 checkList.addRow 的 this 值 ， 同 时 将 data 
作为 第 二 个 参数 传递 。 










































































var myTruck = new Truck('ncc-1701', new DataStore()); 
window.myTruck = myTruck; 

var checkList = new CheckList(CHECKLIST_ SELECTOR); 
var formHandler = new FormHandler(FORM SELECTOR); 


formHandler.addSubmitHandler (myTruek.ereateOrder.bind(myTruek}); 
function (data) { 


OT Lei eee or dor eal ool data); 
checkList.addRow.call(checkList, data); 
}); 
}) (window); 
现在 已 经 有 了 一 个 会 调用 create0rder 和 addRow 的 提交 处 理 程序 。 当 这 两 个 函数 被 调用 时 ， 
提交 处 理 程序 为 它们 传递 了 正确 的 this 值 和 表单 中 的 数据 。 
保存 更 改 ,然后 在 表单 中 输入 一 些 数 据 并 提交 表单 ， 以 此 验证 清单 功能 的 正确 性 。 每 当 订 单 
被 提交 时 ， 都 可 以 看 到 订单 被 添加 到 如 图 11-6 所 示 的 待 处理 清单 中 。 
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11.5 ”通过 


生息 /Mcorrun x Van 
7 © 口 localhost:3000 

| 民 口 Elements Console Sources Network Timeline Profiles Resources 
CoffeeRun |® top v Precovelog 











Setting submit handler for form 


"1iz@bignerdranch.com", 


Coffee Order 
¥ FormHandler {$formElement: n,fn.init[1]} 
| | coffee is black coffee 
emailAddress is todd@bignerdranch.com 
Email ， 
Size is tall 
dr@who.com flavor is 
strength is 11 
Short 
© Tall Object {coffee: "black coffee", emailAddress: 
nu st th: "11" 
Grande y ee eh - 
Adding order for todd@bignerdranch. com 
Flavor Shot coffee is tea with honey 
None emailAddress is liz@bignerdranch.com 
size is tall 
Caffeine Rating flavor is 
加 strength is 30 
Submit Reset Object {coffee: "tea with honey", emailAddress: 
"", strength: "30"} 
Adding order for liz@bignerdranch.com 
> 
Pending Orders: 
_ black coffee, 
(todd@bignerdranch.com) [11] 
tea with honey, 


(liz@bignerdranch.com) [30] 





图 11-6 ”提交 表单 ， 将 订单 添加 到 清单 中 





单 击 行 完 成 订单 


"todd@bignerdranch.com", size: 


中 
x | he 


Security » 


formhandler.is:19 

main.is:25 
formhandler.is:26 
formhandler.is:26 
formhandler.is:26 
formhandler.is:26 
formhandler. js:26 


formhandler.is:28 
"tall", flavor: 


truck,js:13 
formhandler. js:26 
formhandler.is:26 
formhandler. js:26 
formhandler.is:26 
formhandler. js:26 


formhandler.is:28 
size: "tall", flavor: 


truck.js:13 


我 们 就 要 完成 了 ! CoffeeRun 的 用 户 现在 可 以 填写 表单 来 添加 订单 。 当 他 们 提交 表单 时 ， 


单 信息 会 被 保存 到 应 用 程序 的 数据 库 中 ， 


还 会 被 绘制 成 清单 项 。 





接 下 来 ,用 户 可 以 勾 掉 清单 项 了 。 当 他 们 单 击 清 单项 时 ， 则 意味 着 订单 已 完成 。 这 时 应 该 从 
应 用 程序 数据 库 中 删除 订单 信息 ， 并 把 该 清单 项 从 页 面 中 删除 。 图 11-7 展 示 了 这 个 过 程 。 
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图 11-7 单 击 清单 项 的 顺序 图 
首先 ， 要 创建 从 页 面 中 删除 清单 项 的 功能 。 
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11.5.1 创建 CheckList.prototype. removeRow 方 法 





创建 Row 时 ,<input> 的 value 被 设置 成 了 客户 的 邮箱 地 址 。removeRow 方 法 将 使 用 邮箱 地 址 
参数 在 UI 中 检索 并 移 除 正确 的 CheckList 项 。removeRow 将 创建 一 个 属性 选择 器 来 找到 <input> 
元 素 ， 这 个 元 素 的 value 与 邮箱 地 址 相 匹 配 。 

在 找到 匹配 的 元 素 之 后 ， 我 们 将 在 DOM 上 往 上 查找 ， 直 到 找到 [data-coffee-order= 
"checkbox"] 的 元 素 。 

而 这 就 是 包含 清单 中 一 行 所 有 元 素 的 <div> 元 素 。 最 后 ， 因 为 使 用 了 jQuery 来 选择 这 个 
<div>， 所 以 可 以 调用 它 的 remove 方 法 ， 从 DOM 中 移 除 元 素 ， 并 清除 所 有 添加 到 该 DOM 子 树 中 
任何 元 素 上 的 事件 监听 器 。 

在 checklist.js 中 添加 removeRow 方 法 , 并 指定 一 个 emaiLAdd ress 人 参数 。 使 用 实例 的 $eLement 
盟 性 来 检索 它 的 所 有 后 代 元 素 ， 其 中 后 代 元 素 的 vaLue 属 性 与 邮箱 参数 要 相 匹 配 。 接 着 ， 对 检索 
到 的 元 素 调用 cLosest 方 法 ， 检 索 该 元 素 的 data- coffee-order 属 性 为 "checkbox" 的 祖先 。 最 
后 ， 对 该 祖先 执行 remove 方 法 。( 代码 中 有 一 些 新 语法 ， 之 后 将 对 其 进行 解释 。) 

































































CheckList.prototype.addRow = function (coffeeOrder) { 
} 


CheckList.prototype.removeRow = function (email) { 
this. $element 


.find('[value="' + email + '"]') 
.Closest('[data-coffee-order="checkbox"]') 
.remove(); 


}; 


function Row(coffeeOrder) { 


我 们 在 这 里 链 式 调用 了 几 个 方法 。jQuery 的 设计 允许 我 们 像 多 步 执行 一 样 对 一 个 对 象 进行 多 
个 方法 调用 ， 只 需要 在 最 后 一 个 方法 调用 的 末尾 加 上 分 号 即 可 。 

链 式 调用 的 要 求 是 前 一 个 方法 必须 返回 jQuery 封装 对 象 , 以 便 调用 后 一 个 方法 。find 返 回 了 
一 个 jQuery 封装 对 象 ，closest 也 是 如 此 。 这 样 就 可 以 将 三 个 方法 链 式 调用 了 。 

请 注意 , this .$element.find 只 是 在 一 个 范围 内 查找 , 而 不 是 搜索 整个 DOM 一 一 它 只 会 搜 
索 this.$element 的 后 代 元 素 。 


11.5.2 ”删除 被 覆盖 的 条 目 


保存 文件 ， 切 换 到 浏览 器 。 在 表单 中 填写 两 个 拥有 相同 邮箱 地 址 的 订单 ， 分 别 下 成 “订单 1” 
和 “订单 2”。 在 提交 两 个 订单 后 , 在 控制 台中 调用 myTruck.print0Orders, 图 11-8 显 示 了 执行 


结果 。 
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myTruck.printOrders(); 


Pending Orders: Truck #ncc-1781 has pending orders: truck. js:28 
| truck. js:30 
order 1, (greedy@mistergreedypants.com) [30x] Object {coffee: "order 2", emailAddress: 
order 2, (greedy@mistergreedypants.com) [30x] Ee size: "tall", flavor: "", strength: 


undefined 


图 11-8 UI 中 拥有 相同 邮箱 地 址 的 两 个 订单 


之 前 说 过 : 每 个 客户 只 能 拥有 一 个 公开 订单 。 因 为 我 们 使 用 简单 的 键 值 对 存储 数据 ， 所 以 同 
一 邮箱 地 址 对 应 订单 中 的 后 者 会 覆盖 前 者 。 正 如 控制 台所 显示 的 , “订单 2” 是 唯一 的 待 处 理 订 单 ， 
“订单 1” 已 经 被 覆盖 了 。 

但 是 清单 并 没有 反映 出 这 一 点 ， 它 依然 显示 “订单 1” 和 “订单 2”。 在 为 订单 添加 一 个 清单 
行 时 ， 应 该 先 确保 之 前 所 有 与 该 邮箱 地 址 相同 的 清单 行 都 被 删除 了 。 

现在 可 以 轻而易举 地 根据 邮箱 地 址 删除 行 。 在 checklistjs 中 更 新 addRow 原 型 方法 ， 使 它 要 做 
的 第 一 件 事 就 是 使 用 传人 的 邮箱 地 址 作为 参数 来 调用 removeRow。 



































CheckList.prototype.addRow = function (coffeeOrder) { 
// 移 除 匹配 相应 邮箱 地 址 的 已 有 行 
this.removeRow(coffeeOrder.emailAddress); 


// 使 用 咖啡 订单 信息 创建 一 个 新 的 Row 实 例 
var rowElement = new Row(coffeeOrder); 


// 把 新 实例 的 $element 属 性 添加 到 清单 
this.s$element.append(rowElement. $element); 
}; 

















保存 checklistjs， 并 在 浏览 器 中 验证 是 否 当 具有 相同 邮箱 地 址 的 第 二 个 订单 被 提交 时 ， 第 一 
个 订单 的 清单 行 已 经 被 删除 了 。 
既然 已 经 可 以 从 UI 中 删除 待 处 理 清 单行 了 ， 那 么 就 让 我 们 专注 于 清单 单 击 事件 吧 。 











11.5.3 ”编写 addClickHandler 方 法 


我 们 将 采用 与 FormHandler 相 同 的 注册 事件 处 理 程序 来 处 理 对 清单 的 点 击 。 

FormHandLer.prototype.addSubmitHandLer 接 受 一 个 函数 参数 fn， 然 后 我 们 注册 一 个 匿 
名 函数 来 处 理 this .$formELement 的 submit 事 件 。 在 匿名 函数 的 内 部 调用 fn。 下 面 是 可 以 参考 
的 方法 定义 : 


FormHandler.prototype.addSubmitHandler = function (fn) { 





console.log('Setting submit handler for form'); 
this.$formElement.on('submit', function (event) { 
event.preventDefault(); 


var data = {}; 
$(this).serializeArray().forEach(function (item) { 





data[item.name] = item.value; 
console.log(item.name + ' is ' + item.value); 


}); 


console.log(data); 


fn(data); 
this.reset(); 
this.elements[0].focus(); 
}); 
}; 


这 会 使 FormHandler.prototype.addSubmitHandtler 变 得 十 分 灵活 ， 因 为 我 们 可 以 给 它 传 
递 任 何 需要 在 表单 提交 之 后 被 运行 的 函数 ,这 样 ,FormHandler.prototype.addSubmitHandler 
既 不 需要 知道 该 函数 的 详细 信息 ， 也 不 需要 知道 它 所 执行 的 步 又 。 

向 CheckList 添 加 一 个 名 为 addClickHandler 的 原型 方法 , 该 方法 的 工作 方式 与 FormHandler 
的 addSubmitHandler 相 同 。 换 言 之 ， 它 将 进行 以 下 操作 。 

(1) 接受 一 个 函数 参数 。 

(2) 注册 事件 处 理 程序 回调 。 

(3) 在 事件 处 理 程序 回调 中 调用 第 一 步 中 的 函数 参数 。 

CheckList.prototype.addClickHandler 与 FormHandler.prototype.addSubmitHandler 
不 同 的 地 方 是 ， 它 将 监听 一 个 点 击 事件 并 将 回调 绑 定 到 CheckList 实 例 上 。 

在 checklistjs 中 添加 addCLickHandtLer 方 法 并 指定 一 个 名 为 fn 的 参数 。 采 用 jQuery 的 on 方法 
监听 点 击 事件 。 

在 事件 处 理 了 水 数 中 声明 一 个 名 为 email 的 本 地 变量 ,并 将 代表 客户 邮箱 地 址 的 
event .target .value 赋 值 给 它 。 然 后 调用 removeRow (email)， 再 调用 fn(email)。 记 住 ， 要 
使 用 bind(this) 来 设置 事件 处 理 程序 函数 的 上 下 文 对 象 。 



































function CheckList(selector) { 


} 


CheckList.prototype.addClickHandler = function (fn) { 
this.s$element.on('click', 'input', function (event) { 
var email = event.target.value; 
this. removeRow (email); 
fn(email); 
}.bind(this)); 
}; 


CheckList.prototype.addRow = function (coffeeOrder) { 














使 用 this .$element .on 注册 回调 事件 处 理 程序 时 ， 要 把 click 作 为 事件 名 称 ， 但 同时 也 要 
传人 一 个 过 滤 选 择 器 作为 第 二 个 参数 。 过 滤 选 择 器 告知 事件 处 理 程序 当 且 仅 当 事件 是 由 <input> 
元 素 触 发 时 才 执 行 回 调 函 数 。 
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这 种 模式 被 称 为 事件 委托 模式 ， 它 的 工作 原理 是 因为 cLick 和 keypress 等 事件 都 会 通过 
DOM 传 播 ， 这 就 意味 着 它们 的 祖先 元 素 也 会 接收 到 事件 。 

每 当 要 给 待 处 理 清 单 这 类 动态 添加 或 者 删除 的 元 素 绑 定 事件 时 ， 都 应 该 使 用 事件 委托 的 方 
式 。 为 动态 添加 元 素 的 容 右 添加 单一 事件 监听 程序 , 然后 根据 实际 触发 事件 的 元 素 执 行 相应 的 处 
理 程序 是 更 为 容易 、 更 加 高 效 的 做 法 。 

请 注意 ， 不 要 在 事件 处 理 程序 中 调用 event.preventDefault。 为 什么 呢 ?” 因 为 如 果 调 用 
event .preventDefault， 该 复 选 框 将 不 会 在 被 选中 时 改变 其 显示 状态 。 

另外 要 注意 ,我 们 把 事件 处 理 程序 回调 绑 定 到 了 this， 而 它 引 用 的 是 CheckList 实 例 。 




















11.5.4 ”调用 addClickHandler 





addCLickHandtLer 需 要 关联 到 deLiver0rder。 回 到 main.js 去 进行 关 卫 
addCLickHandtLer 传 递 一 个 绑 定 版 的 deLiverOrder。 





var myTruck = new Truck('ncc-1701', new DataStore()); 
window.myTruck = myTruck; 

var checkList = new CheckList(CHECKLIST SELECTOR); 
checkList.addClickHandler (myTruck.deliverOrder.bind(myTruck)); 
var formHandler = new FormHandler(FORM SELECTOR); 


保存 修改 ,并 在 表单 中 添加 一 些 咖啡 订单 。 单 击 其 中 任何 一 个 清单 项 的 复 选 框 或 者 文本 ， 
将 被 删除 ( 如 图 11-9 所 示 )! 


辆 





rormnang er, ]5:20 
Submit Reset Object {coffee: "tea with honey", emailAddress: "liz@bignerdranch.com", size: "grande" 
flavor: "", strength: "52"} 
Adding order for liz@bignerdranch.com truck.js:13 
> 
Pending Orders: 
black coffee, 


(todd@bignerdranch.com) [11] 


tea with honey, 
(liz@bignerdranch.com) [52] 


二 击 “black 和 (todd@bignerdranch.com)” 的 复 选 框 


Submit Reset Object {coffee: "tea with honey", emailAddress: "liz@bignerdranch.com", size: ee 二 
flavor: "", strength: "52"} 
Adding order for liz@bignerdranch.com truck.is:13 
Delivering order for todd@bignerdranch.com truck.is:18 
Pending Orders: > 


tea with honey, 
(lz@bignerdranch.com) [52] 





图 11-9 单 击 一 个 清单 项 来 删除 它 


我 们 现在 已 经 学 会 了 如 何 动态 创建 表单 元 素 并 使 用 它们 的 事件 处 理 程序 。 可 以 将 邮箱 地 址 作 
为 标识 ， 将 每 个 人 与 特定 的 咖啡 订单 相关 联 。 
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通过 这 些 技术 , 我 们 完成 了 管理 UI 的 模块 , 把 一 个 只 能 在 控制 台中 运行 的 程序 转化 为 在 现实 
中 也 可 用 的 应 用 程序 。 

现在 已 经 完成 了 CoffeeRun 三 个 主要 部 分 中 的 两 个 。 除 了 用 于 管理 应 用 程序 数据 的 内 部 逻辑 
外 , 我们 还 添加 了 表单 元 素 ， 全 用 omitanidte ENScktist 攻 区 上 共 交 互 式 的 UI。 接 下 来 的 几 章 
将 探讨 如 何 与 远 端 服务 器 交换 数据 。 


11.6 ”初级 挑战 :在 描述 中 加 入 浓度 信息 


假定 咖啡 的 浓度 是 最 为 重要 的 信息 ， 它 应 该 位 于 描述 的 开始 部 分 。 
尝试 更 改 订单 描述 的 书写 方式 ， 让 咖啡 浓度 位 于 描述 文本 的 开头 。 


11.7 ”中 级 挑战 : 不 同 口味 ， 不 同 颜色 


党 试 根据 不 同 的 口味 显示 不 同 颜色 的 订单 。 根 据 每 种 咖啡 的 选择 情况 ,让 清单 中 的 不 同行 以 
不 同 的 背景 颜色 显示 。 
记 住 要 确保 文本 与 背景 颜色 有 足够 强 的 对 比 度 。 


11.8 ”高 级 挑战 : 允许 编辑 订单 


允许 用 户 编 辑 现 有 的 订单 。 你 需要 修改 清单 的 工作 方式 。 

如 果 用 户 双 击 某 个 订单 ,请 将 该 订单 重新 载 人 表单 进行 编辑 。 如 果 用 户 只 点 击 一 次 , 则 置 灰 
该 行 ， 并 在 几 秒 钟 之 后 视 该 订单 项 为 已 完成 ， 并 将 其 从 清单 和 应 用 程序 的 数据 中 删除 

额外 挑战 : 请 确保 用 户 在 完成 编辑 之 后 ， 编 辑 后 的 行 应 该 在 原 位 置 更 新 ， 而 不 是 先 删除 再 替 
换 为 新 行 。 



























































































































































表 蛙 校 验 








CoffeeRun 已 经 可 以 运行 了 ! 用 户 可 以 在 表单 中 输入 咖啡 订单 的 信息 ， 这 些 信息 之 后 会 被 处 
理 并 存储 。 但 是 思考 一 下 ,如 果 有 人 在 表单 中 填写 了 错误 的 或 者 不 可 用 的 信息 ， 那 对 应 用 和 美食 
车 会 产生 怎样 的 影响 呢 ? 

无 须 担心 ! 通过 代码 可 以 很 轻松 地 处 理 这 种 问题 ,确保 应 用 所 需 数据 的 合法 性 。 事实 上 ,这 
是 将 数据 发 送 给 服务 器 前 必须 要 做 的 事情 。 几乎 每 个 现代 浏览 絮 都 会 在 订单 被 提交 前 对 其 进行 校 
验 。 我 们 所 需要 做 的 就 是 设置 校 验 规则 。 

在 本 章 中 ,我 们 将 学 习 两 种 表单 校 验方 式 。 第 一 种 是 在 HTML 上 添加 校 验 属性 ， 使 用 浏览 器 
内 置 的 校 验 机 制 进 行 校 验 。 第 二 种 是 使 用 约束 校 验 API( Constraint Validation API ), 台 | JavaScript 
来 编写 我 们 自己 的 校 验 代码 。 










































































12.1 required 属性 


最 简单 的 表单 校 验 是 检测 字段 是 否 为 空 , 这 种 校 验 对 于 带 有 默认 值 的 字段 不 会 生效 ,如 杯 型 、 
口味 、 咖 啡 浓度 。 但 订单 和 邮箱 地 址 字段 是 必 填 的 一 一 你 肯定 不 希望 收 到 这 些 字段 为 空 的 订单 。 
在 index.html 中 为 订单 和 邮箱 字段 添加 required 属 性 ， 它 是 一 个 布尔 属性 。 



























































<div class="form-group"> 
<label for="coffeeOrder">0Order</label> 
<input class="form-control" name="coffee" id="coffeeOrder" 
autofocus required /> 
</div> 


<div class="form-group"> 
<label for="emailInput">Email</label> 
<input class="form-control" type="email" name="emailAddress" 
id="emailInput" value="" placeholder="dr@who.com" 
required /> 
</div> 





记 住 ， 无 须 为 布尔 属性 赋值 。 如 果 误 写 为 required="false"， 事实 上 它 的 值 仍然 为 true， 
这 个 字段 仍 是 必 填 项 ! 浏览 器 只 关心 这 个 属性 是 否 存 在 ， 而 不 会 关注 它 的 值 。 
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有 必要 再 强调 一 遍 : 如 果 元 素 的 某 个 属性 是 布尔 属性 ， 那么 无 论 为 它 赋 予 什 么 值 ,浏览 器 均 
会 认为 该 值 为 true。 

保存 index.html， 确 保 browser-sync 正 在 运行 , 在 浏览 需 中 打开 CoffeeRun。 尝 试 提交 订单 或 者 
邮箱 字段 为 空 的 表单 ， 会 看 到 一 个 警告 ， 如 图 12-1 所 示 。 



































@@@@ 4 口 区 | x 全 @@@ 1 口 CoffeeRun x | 全 
对 GC || localhost:3000 yr 三 SC || localhost:3000 yr| 三 
Coffee Order Coffee Order 
| | macchiato 
Email 四 Please fill out this field. Email 
dr@who.com dr@who.com 
Short Short 四 Please fill out this field. 
© Tall @ Tall I I 


12-1 ” 当 字 段 为 空 时 抛 出 的 错误 


注意 ， 提 交 处 理 程序 没有 在 控制 台中 输出 任何 消息 ， 因 为 submit 事 件 只 在 浏览 器 校 验 表单 
过 后 才 会 触发 (如 图 12-2 所 示 )。 






































委 昔 测 柄 要 oT ] 沿 贤 
有 | 有 
当然 有 效 ! 人 一 不 ， 数据 无 效 
ba : : 
:触发 submit 事 件 i 显 | 
| 











图 12-2 ”表单 验证 时 两 个 可 能 的 事件 序列 
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12.2 ”使 用 正则 表达 式 校 验 表单 


使 用 required 属 性 是 确保 字段 不 为 空 的 一 种 简单 方式 ， 但 是 如 果 我 们 希望 限制 表单 字段 的 
数据 格式 呢 ? 这 就 需要 使 用 pattern 属 性 了 。 

在 订单 <input> 标 签 中 的 required 属 性 后 添加 pattern 属 性 , 并 为 其 分 配 一 个 特殊 格式 的 字 
符 串 。 这 种 字符 串 被 称 为 正则 表达 式 ， 稍 后 会 对 它 进行 解释 。 









































<div class="form-group"> 
<label for="coffeeOrder">0Order</label> 
<input class="form-control" name="coffee" id="coffeeOrder" 
autofocus required pattern="[a-zA-Z\s]+" /> 
</div> 

















正则 表达 式 是 一 串 用 于 模式 匹配 的 字符 。[a-zA-Z\s]+ 这 句 正 则 表达 式 的 含义 是 ; 在 由 小 写 
字母 (a-z )、 大 写字 母 (A-z ) 或 者 空白 字符 (\s ) 组 成 的 集合 中 任 选 一 个 重复 一 次 或 多 次 (+ )。 

简单 来 说 ， 当 你 提交 表单 时 ， 这 个 字段 只 接受 包含 字母 或 空格 的 值 。 

保存 并 刷新 页 面 ， 看 看 如 果 在 订单 字段 输入 符号 或 者 数字 并 提交 后 会 发 生 什么 ? 

















12.3 ”约束 校 验 API 


在 校 验 表单 字段 时 ， 最 健壮 的 做 法 是 编写 校 验 函 数 。 你 可 以 使 用 约束 校 验 API 来 触发 内 置 的 
校 验 行为 。 

但 是 这 么 做 也 要 付出 不 小 的 代价 一 一 苹果 的 Safari 浏 览 器 对 约束 校 验 API 的 支持 度 非常 低 。 

虽然 有 这 些 弊端 ， 但 对 我 们 来 说 最 好 的 做 法 是 先 编写 符合 标准 的 代码 ， 然 后 通过 JavaScript 
库 去 弥补 浏览 器 的 兼容 性 问题 。( 你 可 以 从 12.6 节 了 解 更 多 信息 。) 

假设 美食 车 是 面向 我 们 公司 的 雇员 的 , 因此 我 们 需要 保证 客户 都 是 我 们 的 雇员 。 一 个 简单 的 
办 法 是 确保 提交 的 邮箱 地 址 都 在 我 们 公司 的 域名 下 。 

可 以 对 emaiLAddress 字 段 使 用 pattern 属 性 ， 但 这 是 一 个 学 习 约 束 校 验 API 的 好 机 会 。( 其 
实 还 因为 下 一 章 会 对 校 验 函 数 进行 扩展 一 一 不 只 是 简单 地 校 验 邮箱 域名 , 还 需要 发 送 到 服务 器 进 
行 查 重 校 验 。) 

创建 一 个 scripts/validation.js 文 件 用 于 放置 校 验 函 数 。 在 index.html 上 为 新 模块 添加 <script> 



































































































































</div> 
</section> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js" 
charset="utf-8"></script> 
<script src="scripts/validation.js" charset="utf-8"></script> 
<script src="scripts/checklist.js" charset="utf-8"></script> 
<script src="scripts/formhandler.js" charset="utf-8"></script> 
<script src="scripts/datastore.js" charset="utf-8"></script> 
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<script src="scripts/truck.js" charset="utf-8"></script> 
<script src="scripts/main.js" charset="utf-8"></script> 
</body> 
</html> 
保存 index.html。 在 validation.js 中 添加 一 个 IIFE 模 块 ， 创 建 一 个 空 对 象 字面 值 ， 分 配 至 变量 
Validation， 并 将 该 变量 暴露 到 App 命 名 空间 。 
(function (window) { 


"use strict'; 
var App = window.App || {}; 


var Validation = { 
}; 


App.VaLidation = Validation; 
window.App = App; 
}) (window); 
Validation 模 块 只 用 于 组 织 函 数 ， 所 以 它 不 需要 写 为 构造 函数 。 
在 其 中 添加 一 个 scCompanyEmail 方 法 ,该 方法 使 用 正则 表达 式 校 验 邮箱 地 址 并 返回 布尔 值 。 
(你 可 以 随便 修改 邮箱 域名 。 ) 


(function () { 
"Use strict'; 
var App = window.App || {}; 


var Validation = { 
isCompanyEmail: function (email) { 
return /.+@bignerdranch\.com$/.test(email); 
} 
}; 


App.Validation = Validation; 
window.App = App; 
}) (window); 
将 字符 串 放置 在 正和 斜 枉 ( // ) 之 间 可 以 构成 正则 表达 式 。 在 斜 杠 之 间 , 我们 指定 了 一 个 字符 
串 必 须 由 一 个 或 者 多 个 字符 ( .+ ) 和 @bignerdranch.com 组 成 。 同 时 ， 还 使 用 了 反 和 斜 杠 表示 
bignerdranch.com 中 的 句点 应 被 视 为 字面 值 。( 一 般 来 说 ,正则 表达 式 中 的 句点 可 以 用 来 匹配 任意 
字符 。) 结 尾 的 $ 表 示 字 符 串 必须 以 @bignerdranch.com 结 尾 ; 换 句 话说 , 在 这 之 后 不 能 有 任何 字符 。 
正则 表达 式 的 对 象 拥 有 一 个 test 方 法 。 把 字符 串 传 给 test 方 法 ， 它 会 返回 一 个 布尔 值 一 一 
true 表 示 字 符 串 符合 正则 表达 式 的 校 验 规则 ， 而 false 表 示 不 符合 。( 要 了 解 更 多 关于 正则 表达 式 
的 知识 ,可 以 查看 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global Objects/RegExp。 ) 
在 控制 台中 测试 一 下 App.Validation.isCompanyEmail 消 数 ( 如 图 12-3 所 示 )。 














222 第 12 章 表单 校 验 





[R j] Elements Console Sources Network » pk 


人 可 top Preserve log 


> App,.VatLidation,isCompanyEmaiL('drGevitL,com'); 
false 


> App.Validation.isCompanyEmail('sheriff@bignerdranch. com'); 
true 


> | 
12-3 ”在 控制 台 测 试 App.Validation.isCompanyEmail 


现在 已 经 有 了 用 于 校 验 邮箱 地 址 的 的 函数 ， 接 下 来 就 可 以 将 其 和 表单 结合 起 来 了 。 
12.3.1 监听 input 事 件 


当 用 户 填 写 表单 时 , 表单 元 素 会 触发 各 种 事件 。 那 什么 时 候 使 用 这 个 校 验 函数 呢 ?” 是 在 用 户 
敲 击 字 符 时 ,或 者 在 表单 字段 失去 焦点 时 ， 又 或 者 在 提交 表单 时 ? 

约束 校 验 API 需 要 在 提交 表单 前 标记 其 无 效 字 段 。 只 要 有 无 效 字段 ， 浏 览 器 就 不 会 触发 
submit 事 件 ， 所 以 在 提交 的 时 候 才 进行 校 验 就 太 迟 了 。 

在 表单 字段 失去 焦点 时 触发 的 事件 被 称 作 blur 事 件 , 这 也 不 是 一 个 校 验 的 好 时 机 。 假设 用 户 
的 光标 在 邮箱 地 址 输入 框 中 , 即 当前 是 这 个 字段 获得 焦点 。 如 果 用 户 输入 完成 后 按 下 回 车 键 ， 则 
会 触发 提交 事件 ， 而 非 失 去 焦点 事件 ， 所 以 相应 的 校 验 程 序 也 不 会 执行 。 

因此 只 能 在 用 户 输入 的 时 候 执 行 校 验 程 序 。 更 新 FormHandlerjs 中 的 FormHandtLer 模 块 ， 在 
其 中 添加 addInputHandter 原 型 方法 ， 它 会 在 表单 上 绑 定 input 事 件 监 听 器 。 和 addSubmit - 
HandtLer 方 法 一 样 ， 它 接受 一 个 函数 实 参 。 










































































FormHandler.prototype.addSubmitHandler = function (fn) { 

}; 

FormHandler .prototype.addInputHandler = function (fn) { 
consoLe.Log('Setting input handler for form'); 


}; 


App.FormHandler = FormHandler; 
window.App = App; 





使 用 jQuery 的 on 方法 绑 定 input 事 件 的 监听 器 ， 确 保 使 用 事件 委托 模式 过 滤 掉 了 除 
[name="emaiLAddress"] 字 段 外 的 其 他 字段 触发 的 事件 。 


FormHandLer.prototype.addInputHandLer = function (fn) { 
console.log('Setting input handler for form'); 
this.s$formElement.on('input', '[name="emailAddress"]', function (event) { 
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// 在 此 处 播 入 事件 处 理 程序 
}); 
}; 


App.FormHandler = FormHandler; 
window.App = App; 





在 事件 处 理 程序 中 ， 从 event.target 对 象 中 提取 出 邮箱 地 址 字段 的 值 。 接 着 执行 
addInputHandtLer 的 函数 参数 fn， 并 且 将 邮箱 地 址 作为 参数 传人 ， 最 后 用 consote.1Log 方 法 输 


| 日 























FormHandler.prototype.addInputHandler = function (fn) { 
console.log('Setting input handler for form'); 
this.$formElement.on('input', '[name="emailAddress"]', function (event) { 


4 


var emailAddress = event.target.value; 
console.log(fn(emailAddress)); 
}); 
}; 
App.FormHandler = FormHandler; 
window.App = App; 
保存 formhandler.js。 


12.3.2 将 input 事 件 和 有 效 性 校 验 绑 定 
在 main .js 中 从 App 命 名 空间 引入 vaLidation， 并 将 其 保存 到 本 地 变量 中 。 





var Truck = App.Truck 

var DataStore = App.DataStore; 

var FormHandler = App.FormHandler; 

var Validation = App.Validation; 

var CheckList = App.CheckList; 

var myTruck = new Truck('ncc-1701', new DataStore()); 








引入 后 ， 就 可 以 将 其 和 FormHandler 的 新 方法 addInputHandler 结 合 使 用 。 
在 mainjs 的 最 后 ， 将 Validation.isCompanyEmail 传人 入 到 formHandler 实例 的 
addInputHandler 方 法 中 。 











formHandler.addSubmitHandler(function (data) { 
myTruck.createOrder.call(myTruck, data); 
checkList.addRow.call(checkList, data); 

}); 


formHandler.addInputHandler(Validation.isCompanyEmail); 


}) (window); 
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保存 ， 然 后 刷新 页 面 。 填 写 邮箱 地 址 ， 查 看 控制 台 的 输出 。 在 输入 有 效 邮 箱 地 址 的 过 程 中 ， 
控制 台 通 过 FormHandler.prototype.addInputHandler 中 的 console.1log(fn (email Address)); 
输出 一 堆 false。 而 当 邮 箱 地 址 输入 完成 后 ， 就 会 看 到 控制 台 输 出 true ( 如 图 12-4 所 示 )。 


























eee 口 CoffeeRun x [人 二 | 
所 C | localhost:3000 ?| 三 
| [x 0] Elements Console Sources Network » x 
CoffeeRu Nn @@ tiop vv Preservelog 
Setting submit handler for form formhandler.js:19 
Coffee Order 人 
Pp FormHandler {$formElement: n.fn.init[1]} main,js:27 
coffee bean slushie Setting input handler for form formhandler. js:37 
【18) false formhandler,. js:40 
Email | 
true formhandler. js:40 
me@bignerdranch.com > | 





图 12-4 ”输出 邮箱 校 验 结果 





在 斋 击 (或 者 删除 ) 邮箱 地 址 字段 的 每 个 字符 的 时 候 ， 校 验 程序 都 会 执行 。 确 认 它 能 够 正确 
校 验 输 入 后 ， 就 可 以 用 它 来 展示 错误 信息 了 。 


12.3.3 ”触发 有 效 性 检查 


既然 我 们 已 经 能 验证 邮箱 地 址 是 否 属于 我 们 公司 域名 下 , 就 应 该 在 检测 失败 时 告知 用 户 。 使 
用 event.target 中 的 setCustomValidity 方 法 将 其 标记 为 无 效 。 

在 formhandler.js 中 移 除 console.1log 语 句 。 定 义 一 个 警告 信息 的 变量 ， 并 添加 if/else 判 断 
语句 。 如 果 fn(emailAddress) 返 回 true， 清除 该 字段 的 有 效 性 提示 ， 否 则 将 警告 信息 分 配给 
message 变 量 ， 并 将 message 设 为 有 效 性 提示 。 






































FormHandLer.prototype.addInputHandLer = function (fn) { 
console.log('Setting input handler for form'); 
this.s$formElement.on('input', '[name="emailAddress"]', function (event) { 

var emailAddress = event.target.value; 
console.ltog(fn(emailAddress)); 
var message = ''; 
if (fn(emailAddress)) { 
event.target.setCustomValidity(''); 
} else { 
message = emailAddress + ' is not an authorized email address!' 
event.target.setCustomValidity (message); 


} 
}); 
}; 
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被 传人 的 的 错误 信息 会 展示 给 用 户 。 所 以 即便 没有 错误 ， 我 们 也 要 执行 setCustomVaLidity， 





但 是 只 需 传人 空 字符 串 即 可 ， 这 样 可 以 将 字段 设置 为 有 效 。 





Co 


自 
我 们 可 以 通过 提交 不 合法 的 邮箱 





在 你 输入 时 , 有 效 性 检测 仅仅 标记 字段 是 否 有 效 , 而 不 展示 错误 信息 。 当 你 点 击 提交 按钮 时 ， 
浏览 器 会 检测 是 否 存在 无 效 字段 ， 并 展示 错误 信 ， 





作为 警告 出 现 的 自 定 义 提示 消息 〈 如 图 12-5 所 示 )。 





eee ] D coffeeRun 





地 址 来 进行 测试 一 一 在 点 击 提交 按钮 后 , 就 会 看 到 字段 旁边 














是 [一 
€ C | localhost:3000 = 
[x | Elements Console Sources Network » eX 
Coffee Ru Nn © top vv Preservelog 
Coffee Order 


Setting submit handler for form 
coffee ice cream 


Email 


formhandler.js:19 
Pp FormHandler {$formElement: n.fn.init[1]} 


Setting input handler for form 
> 





malin.js:27 
leslig.knope@whitehouse.goy| | 





formhandLer,js:37 
) Short 


©@ Tall 





回 leslie.knope@whitehouse.gov is 
not an authorized email address! 


图 12-5 





只 允许 有 效 的 邮箱 地 址 
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现在 的 CoffeeRun 会 检测 订单 字段 和 邮箱 地 址 字段 了 。 为 了 增强 交互 体验 ， 来 为 无 效 字段 
加 入 视觉 特效 只 需要 添加 一 小 段 CSS 代 码 即 可 。 在 index.html 的 <head> 标 签 中 添加 
<styLe> 标 签 

“heads 


<meta charset="utf-8"> 
<title>coffeerun</title> 


<Link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootst 
rap/3.3.6/css/bootstrap.min.css"> 
<style> 


form :invalid { 
border-color: #a94442; 
} 


</style> 
</head> 


这 会 修改 表单 中 拥有 伪 类 :invalid 的 字段 的 边框 颜色 。 这 个 伪 类 会 在 表单 进行 有 效 性 检测 
时 ， 由 浏览 絮 自 动 添 加 。 
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保存 ,然后 回 到 浏览 器 。 按 几 下 Tab 键 (或 者 单 击 文本 输入 字段 外 的 其 他 部 分 )， 诊 焦 在 订单 
或 者 邮箱 地 址 外 的 其 他 字段 上 。 这 时 ， 这 两 个 必 填 字段 的 边框 会 变 成 浅 红色 ( 如 图 12-6 所 示 )。 








CoffeeRun 
Coffee Order 
Email 边框 颜色 均 为 #a94442 








dr@who.com 





图 12-6 ”相信 我 ， 这 些 边 框 是 红色 的 


不 过 更 好 的 做 法 是 当 必 填 字 段 获 得 焦点 时 才 修 改 边框 颜色 ， 所 以 需要 在 index.html 的 选择 器 
上 再 添加 两 个 伪 类 。 
<head> 
<meta charset="utf-8"> 
<titLe>coffeerun</titLe> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootst 
rap/3.3.6/css/bootstrap.min.css"> 
<style> 
form :focus:required:invalid { 
border-color: #a94442; 
} 
</style> 
</head> 























这 样 , 当 且 仅 当 元 素 拥 有 :focus、:required 和 :invaitd 三 个 伪 类 的 时 候 边 框 才 会 变色 (如 
图 12-7 所 示 )。 




















CoffeeRun CoffeeRun 
Coffee Order Coffee Order 

2 我 保证 它们 在 获得 焦点 时 

Email 边框 颜色 均 为 #a94442 去 





图 12-7 只 有 在 元 素 获得 焦点 时 才 展 示 无 效 的 边框 


CoffeeRun 正 逐渐 发 展 为 一 个 功能 齐备 的 Web 应 用 。 在 接 下 来 的 两 章 中 , 我 们 会 通过 Ajax 与 远 
端 服务 需 同 步 数 据 。 
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12.5 ”中 级 挑战 : 为 脱 咖啡 因 咖 啡 进行 自 定 义 校 验 


在 Validation 模 块 中 添加 新 函数 。 它 会 接受 两 个 参数 : 一 个 字符 串 和 一 个 整数 。 如 果 字 符 
串 包含 decaf 目 数字 大 于 20， 则 返回 false。 
为 咖啡 订单 的 文本 字段 和 咖啡 因 浓 度 滑 块 添加 事件 监听 器 , 并 尝试 在 编辑 字段 时 触发 自 定 义 
校 验 ， 从 而 验证 失败 展示 。 


12.6 ”延展 阅读 : Webshim 库 


苹果 的 Safari 浏 览 器 并 不 支持 约束 校 验 API。 如 果 我 们 需要 使 应 用 支持 Safari， 
则 需要 使 用 一 个 库 或 者 使 用 polyfill 来 模拟 浏览 右 没 有 实现 的 API。 
Webshim 是 一 个 能 在 Safari 中 提供 自 定义 约束 功能 的 库 , 可 以 从 github.com/aFarkas/webshim 下 














我 们 之 前 提 过 ， 


载 它 。 




































































实际 上 ，Webshim 库 可 以 polyfill 许 多 功能 。 配 置 并 使 用 它 吧 ! (不 过 因为 它 做 了 很 多 事情 ， 








所 以 文档 比较 星 涩 难 懂 。) 





下 面 将 学 习 如 何 使 用 它 来 帮助 我 们 在 Safari 上 使 月 











月 VaLidation 模 块 。 首 先 ， 从 项 目 


github.com/aFarkas/webshim/releases/latest 下 载 最 新 的 压缩 文件 。 解 压 文 件 , 并 将 其 放置 到 coffeerun 
目录 下 的 js-webshimAwebshim 文 件 夹 中 (就 在 index.html 和 scripts 文 件 夹 旁 )。 
在 index.html 上 添加 <script> 引 入 webshim/polyfiller.js 文 件 。 


</div> 
</section> 


<script 


src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js" 


charset="utf-8"></script> 


<script 
<script 
<script 
<script 
<script 
<script 
<script 
</body> 
</html> 


src="webshim/polyfiller.js" charset="utf-8"></script> 
src="scripts/validation.js" charset="utf-8"></script> 
src="scripts/checklist.js" charset="utf-8"></script> 
src="scripts/formhandler.js" charset="utf-8"></script> 
src="scripts/datastore.js" charset="utf-8"></script> 
src="scripts/truck.js" charset="utf-8"></script> 
src="scripts/main.js" charset="utf-8"></script> 


然后 在 main.js 中 添加 以 下 代码 : 


var Validation = App.Validation,; 
var CheckList = App.CheckList; 


var webshim 
var myTruck 


formHandler. 


= window.webshim; 
= new Truck('ncc-1701', new DataStore()); 


addInputHandler(Validation.isCompanyEmail); 
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webshim.polyfill('forms forms-ext'); 
webshim.setOptions('forms', { addValidators: true, lazyCustomMessages: true }); 


} (window)); 


这 样 会 引入 webshim 库 并 且 在 表单 上 使 用 它 。 

但 是 有 一 个 比较 奇怪 的 地 方 需要 留意 一 一 在 使 用 setCustomValidity 的 时 候 ， 必 须 使 用 
jQuery 包 焉 对 象 。 在 CoffeeRun 中 ， 则 需要 将 formhandlerjs 中 的 addInputHandler 方 法 里 的 
event .target 对 象 包 庄 起 来 。 


FormHandler.prototype.addInputHandler = function (fn) { 
console.log('Setting input handler for form'); 
this.s$formElement.on('input', '[name="emailAddress"]', function (event) { 

var emailAddress = event.target.value; 

Var message = ''，; 

if (fn(emailAddress)) { 
$(event.target)setCustomValidity(''); 

} else 1 
message = emailAddress + ' is not an authorized email address!' 
$(event.target)setCustomValidity(message); 

} 

+ 
}; 





Webshim 的 作者 选择 将 polyfill 功 能 完全 实现 为 jQuery 的 扩展 。 除 了 这 个 包装 ， 不 需要 对 代码 

行 任何 修改 。 

保存 后 ， 可 以 在 Safari 上 进行 测试 。 你 会 发 现 ， 在 没有 输入 咖啡 订单 或 者 输入 错误 邮箱 地 址 
的 情况 下 ， 也 会 有 相应 的 提示 出 现 。 





O00 < 号 Dj 息 ©® localhost [wf 由 口 
CoffeeRun | Webshim - foms polyfil | Using addEventListener and setC... Webshim | 
CoffeeRun 
Coffee Order 


safari coffee punch 


Email 





not my email address| 





not my email address is not an authorized email address! 
© Tall 
Grande 





图 12-8 ”使 用 Webshim 作 为 Safari 的 polyfill 


Webshim 除 了 表单 验证 外 还 提供 了 很 多 功能 ， 浏 览 文档 看 看 你 还 可 以 做 些 什么 。 


Ajax 








在 上 一 章 中 , 我 们 使 用 了 浏览 器 内 置 的 校 验 工具 确保 用 户 输入 的 数据 符合 CoffeeRun 的 要 求 。 
通过 这 个 校 验 ， 我 们 大 可 放心 地 将 数据 发 送 到 服务 器 。 

此 时 ，FormHandLer.prototype.addSubmitHandtLer 方 法 调用 了 事件 对 象 的 prevent- 
Default 方 法 来 阻止 浏览 器 向 服务 器 发 送 请 求 。 一 般 来 说 ,服务 器 会 返回 一 个 促使 页 面 重新 加 载 
的 响应 ,然而 , 我 们 现在 希望 从 表格 中 提取 用 户 输入 的 数据 , 然后 使 用 JavaScript 更 新 表格 和 清单 。 

本 章 将 创建 RemoteDataStrore 模 块 将 请 求 发 送 到 服务 器 并 处 理 响应 ( 如 图 13-1 所 示 )。 不 过 
这 项 任务 会 在 后 台 使 用 Ajax 完成 ， 这 样 的 话 就 不 需要 重新 加 载 页 面 了 。 




















息 息 息 ， 口 cofeepun x 全 
所 CC | localhost:3000 v= 
| 0 Elements Console Sources Network Timeline Profies Resources Security Audits x 
CoffeeRun 大 本 可 |view: 注 二 国 Preservelog 固 Disablecache | No throttling 军 
吧 
二 [Finer | DHidedatauRLs @ | xhR JS css mg Media Font Doc WS Manifest Other 
Name X Headers Preview Response Timing 
让 [De vi{_v: 0，strength: 59, flavor: "", size: "short", emailAddress: "daryl@bignerdranch.com",..} 
is | coffeeorders 一 v: 0 
ni be _id: "56c1148d5acdfb02d94d168e" 
coffee: "motor oil" 
Short emailAddress: "daryl@bignerdranch. com" 
Tall flavor: "™ 
© 吉 size: "short" 
Grande | strength: 59 
Flavor Shot 2 requests 1966B | 
Nons s :Console X 


© 可 top v Preservelog 


Setone neng remotedatastore,. Js:18 
S > Pobject {_v;: @, strength: 59, flavor; "", size: "short", emailAddress: "daryl@bignerdranch,com"..} 
- | i sjs; 
Submit Reset coffee is brainspresso formhandler, is:26 
emailAddress is rick@bignerdranch.com formhandler. is:26 
size is tall formhandler.js:26 
flavor is caramel formhandler.js:26 
Pending Orders: strength is 30 formhandler.is:26 
formhandler,. js:28 
motor oil (daryl@bignerdranch.com) [59] Object {coffee: "brainspresso", emailAddress: "rick@bignerdranch.com", size: "tall", flavor: "caramel", 
brainspresso, (rick@bignerdranch.com) strength: "30"} 
[30] Adding order for rick@bignerdranch.com truck.js:13 


remotedatastore,js:18 
| Object {_v: 0, strength; 30, flavor; "caramel", size; "tall", emailAddress; "rickGbignerdranch ,com' 


图 13-1 本章 结束 后 的 CoffeeRun 























Ajax 是 通过 JavaScript 与 远 端 服务 器 通信 的 技术 。JavaScript 可 以 在 无 须 刷 新 页 面 的 情况 下 ， 
利用 服务 器 返回 的 数据 更 新 页 面 ， 这 大 大 改善 了 Web 应 用 的 体验 。 
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最 初 ， 术 语 Ajax 是 asynchronous JavaScript and XML ( 异步 JavaScript 和 XML ) 的 缩写 。 但 是 
现在 无 论 是 使 用 什么 技术 实现 的 , 只 要 是 符合 这 种 风格 的 异步 数据 通信 方式 , 都 统称 为 Ajax。( 异 
步 通 信和 意味 着 应 用 在 发 送 请 求 后 就 可 以 执行 其 他 任务 ， 无 需 等 待 服务 器 响应 。) 如 今 ，Ajax 是 在 
后 台 发 送 和 接受 数据 的 标准 机 制 。 






































13.1 XMLHttpRequest 对 象 





Ajax 的 核心 是 XMLHttpRequest API。 在 现代 浏览 器 中 ， 我 们 可 以 实例 化 一 个 新 的 
XMLHttpRequest 对 象 . 通 过 它 能 够 在 不 刷新 页 面 的 情况 下 向 服务 器 发 送 请 求 . 这 一 切 都 在 后 台 进 行 。 

通过 XMLHttpRequest 对 象 ， 可 以 监听 请 求 、 响 应 周期 中 的 任何 阶段 , 这 和 在 DOM 对 象 上 监 
听 事 件 大 同 小 异 。 我 们 还 可 以 检查 XMLHttpRequest 的 属性 来 获得 现在 的 请 求 和 响应 周期 的 状态 。 
其 中 response 和 status 是 两 个 十 分 有 用 的 属性 ,它们 会 在 改变 发 生 的 时 候 即 时 更 新 。response 
属性 包括 了 服务 器 返回 的 数据 (如 HTML 、XML 、JSON 等 ，status 是 用 于 展示 HTTP 响 应 是 否 
成 功 的 数字 代码 ， 它 们 也 被 称 作 HTTP 状 态 码 。 

状态 码 按照 范围 分 组 ， 每 个 范围 都 有 自己 的 基本 含义 。 例 如 ，200~299 的 状态 码 表示 成 功 ， 
而 $00~599 的 状态 码 表示 服务 器 错误 。 这 些 范 于 通常 会 被 称 作 “2xx” 或 者 “3xxz” 状 态 。 

表 13-1 展 示 了 一 些 常 用 的 状态 码 。 


表 13-1 常用 HTTP 状 态 码 























































































































状态 码 状态 文本 描 述 

200 OK 请 求 成 功 

400 错误 请 求 服务 器 不 能 理解 该 请 求 

404 找 不 到 找 不 到 对 应 资源 ， 通 常 是 因为 文件 或 路 径 名 不 正确 

500 服务 器 内 部 错误 服务 器 遇 到 了 一 个 错误 ， 例 如 在 服务 器 的 代码 中 有 一 个 未 处 理 的 异常 
503 服务 器 不 可 用 服务 器 不 能 处 理 该 请 求 ， 通 常 是 因为 服务 器 过 载 或 者 宕 机 




















jQuery 拥有 许多 创建 和 管理 XMLHTTpRequest 对 象 的 方法 ， 而 且 它 还 提供 了 一 个 简洁 的 、 向 
后 兼容 的 、 跨 浏览 器 的 API。 它 不 是 唯一 一 个 可 以 管理 Ajax 请 求 的 库 ， 但 是 许多 库 都 遵循 了 它 的 
设计 。 我 们 将 会 使 用 jQuery 的 get 和 post 方 法 来 进行 Ajax 的 GET 和 P0ST 请 求 ， 还 会 使 用 jQuery 的 
aj ax 方法 进行 DELETE 请 求 。 












































13.2 RESTful Web 服务 


为 了 优化 CoffeeRun， 我 们 将 使 用 远 端 Web 服 务 器 来 存储 应 用 数据 。 需 要 使 用 的 服务 器 已 经 
准备 好 了 。 

CoffeeRun 服 务 需 提供 了 RESTful Web 服 务 。“REST” 表 示 “ 具 象 状 态 传输 ”( representational 
state transfer )， 这 是 一 种 基于 HTTP 操 作 ( GET、P0ST、PUT、DELETE ) 和 用 于 标识 服务 器 上 资源 
的 URL 的 Web 服 务 风格 。 
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标识 个 别 事物 ( 如 /coffeeorders/[customer email] )。 
URL 的 不 同 会 影响 HTTP 操 作 的 结果 。 例如 , 使 用 集合 类 的 URL 时 ，GET 请 求 会 检索 集合 中 所 
有 物品 的 列表 ; 如 果 是 使 用 个 别 事物 的 URL，GET 请 求 会 检索 该 事物 的 所 有 细节 信息 。 

表 13-2 展 示 了 URL 和 HTTP 操 作对 应 的 结果 。 














表 13-2 ”在 RESTful 规 范 下 ， 不 同 的 URL 和 HTTP 操 作 得 到 的 结果 








URL 路 径 GET POST PUT DELETE 
/coffeeorders 列举 所 有 记录 创建 一 个 记录 二 除 所 有 记录 
/coffeeorders/a@b.com 得 到 该 记录 3 更 新 记录 删除 该 记录 

















13.3 RemoteDataStore 模块 


接 下 来 会 创建 一 个 RemoteDataSstore 模 块 ， 它 的 任务 是 代表 应 用 和 服务 器 交流 。 
RemoteDataStore 模 块 将 拥有 和 DataSstore 一 样 的 方法 一 -add 、get 、getALL 和 remove。 我 们 
将 使 用 这 些 方法 来 和 服务 器 进行 交流 ( 如 图 13-2 所 示 )。 





DataStore 


请 求 
返回 数据 


图 13-2 DataStore VS RemoteDataStore 


使 用 RemoteDataStore 和 替代 DataStore ， 这 样 就 不 需要 更 改 Truck 、FormHandler 或 者 
CheckList 模 块 了 。( 你 并 不 需要 删除 DataStore 模 块 ， 以 后 会 根据 应 用 的 在 线 情况 在 这 两 种 存 
储 方式 间 切 换 。) 

RemoteDataStore 的 方法 会 在 后 人 台 通 过 网 络 请 求 和 服务 器 进行 异步 通信 。 当 浏览 器 端 接受 服 
务 器 的 返回 后 ， 便 会 执行 回调 函数 。 

每 一 个 RemoteDataStore 方 法 都 接受 一 个 函数 实 参 ， 它 会 在 接受 服务 器 响应 后 执行 。 

创建 一 个 scripts/remotedatastore.js 文 件 ， 并且 在 index.html 上 为 其 添加 一 个 <script> 标 签 。 

















<script src="scripts/validation.js" charset="utf-8"></script> 
<script src="scripts/checklist.js" charset="utf-8"></script> 
<script src="scripts/formhandler.js" charset="utf-8"></script> 
<script src="scripts/remotedatastore.js" charset="utf-8"></script> 
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<script src="scripts/datastore.js" charset="utf-8"></script> 
<script src="scripts/truck.js" charset="utf-8"></script> 
<script src="scripts/main.js" charset="utf-8"></script> 
</body> 
</html> 


保存 index.html。 在 remotedatastore.js 中 引入 App 命 名 空间 和 jQuery， 然 后 创建 IFE 模 块 和 名 为 
RemoteDataStore 的 构造 子 数 。 构造 函数 接受 一 个 参数 作为 远 端 服 务 器 的 URL。 如 果 这 个 参数 并 
没有 传递 进来 ， 构 造 函 数 会 地 出 一 个 错误 。 在 模块 定义 的 最 后 ， 将 RemoteDataStore 暴 露 到 App 
命名 空间 上 。 


(function (window) { 
"use strict'; 
var App = window.App || {}; 
var $ = window.jQuery; 








function RemoteDataStore(url) { 
if (!urL) { 
throw new Error('No remote URL supplied.'); 


} 


this.serverUrL = url; 


} 


App.RemoteDataStore = RemoteDataStore; 
window.App = App; 


}) (window); 


13.4 ”向 服 务 器 发 送 数 据 


先 编写 add 方 法 来 将 客户 订单 数据 存储 到 远 端 Web 服 务 器 上 。 
为 RemoteDataStore 添 加 一 个 原型 方法 。 和 DataStore 的 add 方 法 一 样 , 它 有 key 和 val 两 个 
形 参 。 虽 然 并 不 一 定 要 使 用 相同 的 形 参 名 ,但 是 让 它们 保持 一 致 是 个 好 做 法 。 





























function RemoteDataStore(url) { 


} 

RemoteDataStore.prototype.add = function (key, val) { 
// 放置 要 运行 的 代码 

}; 


App.RemoteDataStore = RemoteDataStore; 
window.App = App; 
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13.4.1 ”使 用 jQuery 的 $ ,post 方 法 


我 们 会 在 RemoteDatastore 模 块 中 使 用 jQuery 的 $.post 方 法 ,这 个 方法 会 在 后 合 像 
XMLHTTpRequest 对 象 一 样 给 服务 器 发 送 P0ST 请 求 。 





































































RemoteDataStore Truck 
add createOrder 
remove deLiverorder 
器 jQ 
四 getALL 
| ge 
printorders 
get 





























图 13-3 RemoteDataSstore 使 用 jQuery 进行 Ajax 请 求 


$.post 方 法 只 需要 两 个 信息 : 服务 需 的 URL 和 要 带 上 的 数据 。 
在 remotedatastore.js 中 更 新 add 方 法 ， 让 其 调用 $.post 方 法 , 并 传人 this .serverUrl 和 val。 








RemoteDataStore.prototype.add = function (key, val) { 
$.post(this.serverUrl, val); 


App.RemoteDataStore = RemoteDataStore; 
window.App = App; 


请 注意 ， 我 们 并 没有 使 用 key 参 数 。 添 加 它 是 为 了 保持 add 方 法 在 RemoteDataStore 和 
DataStore 中 的 一 致 性 一 一 它们 都 将 咖啡 订单 信息 作为 第 二 个 参数 。 对 RemoteDataStore 来 说 ， 
这 是 至 关 重 要 的 一 部 分 。 





13.4.2 添加 回调 函数 
和 许多 jQuery 的 方法 一 样 ,$.post 接 受 一 个 可 选 的 参数 ,传递 一 个 回调 函数 作为 第 三 个 参数 。 
当 从 服务 器 得 到 响应 后 ， 这 个 函数 会 被 执行 ， 并 将 数据 传人 其 中 。 
这 和 我 们 编写 的 的 事件 处 理 代码 十 分 相似 一 一 注册 一 个 会 在 未 来 被 调用 的 函数 。 人 处 理事 件 























时 ， 这 个 时 间 点 是 鼠标 点 击 或 者 提交 表单 的 时 候 ; 处 理 远 端 数据 时 ， 这 个 时 间 点 就 是 服务 融 啊 应 
返回 的 时 候 。 


将 一 个 匿名 函数 作为 第 三 个 参数 传 给 $.post 。 这 个 匿名 函数 有 一 个 形 参 ， 用 server- 
Response 来 标记 ， 并 且 使 用 consote ,Log 将 其 打印 出 来 。 
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RemoteDataStore.prototype.add = function (key, val) { 
$.post(this.serverUrl, val, function (serverResponse) { 
console.log(serverResponse); 
}); 
}; 


App.RemoteDataStore = RemoteDataStore; 
window.App = App; 





现在 $. post 知 道 了 三 件 事 情 : 和 谁 交 流 、 交 流 什 么 和 交流 后 要 做 什么 。 
保存 修改 内 容 ， 启 动 browser-sync 并 在 浏览 器 中 打开 控制 台 。 本 书 提供 Wn di 可 以 
利用 它 的 URL 实 例 化 RemoteDataStore 对 象 。( 又 一 次 ， 为 了 适应 排版 让 代码 折 行 ， 请 确保 它 
们 在 同一 行 。) 
var remoteD9 = new App.RemoteDataStore 
("http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders"); 


现在 执行 add 方 法 ， 传 人 一 些 测 试 数据 ; 
remoteDS.add('a@b.com', {emailAddress: 'a@b.com', coffee: 'espresso'}); 


在 控制 台中 查看 console ,Log 语句 输出 的 结果 ( 如 图 13-4 所 示 )。 


> var remoteDS = new App.RemoteDataStore("http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders"); 
undefined 

>, remoteDS.add('a@b.com', {emailAddress: 'a@b.com', coffee: 'espresso'}); 
undefined 


remotedatastore.ijs:17 
Object {_v: 0, coffee: "espresso", emailAddress: "a@b.com", _id: "5712c496e36db403007d087c"} 


> 








图 13-4 控制 台 RemoteDataStore.add 的 结 


展示 R 
控制 台 输 出 的 对 象 里 包含 了 服务 器 返回 的 信息 : coffee 和 emailAddress 信 息 ， 还 有 一 些 区 
分 服务 器 的 数据 。 


13.4.3 ”检查 Ajax 的 请 求 和 响应 


点 击 开发 者 工具 上 方 的 NetWork ( 在 Sources 和 Timeline 之 间 )， 打 开 网 络 面板 。 这 个 面板 展示 
了 浏览 器 发 出 的 请 求 ， 并 且 让 我 们 查看 它们 的 信息 。 
ee， 青 求 , 点 击 左 上 角 的 s 图 标清 除 它 们 。 然后 激活 下 方 的 控制 台 抽 
屋 , 同时 观看 控制 台 只 需 按 下 键盘 上 的 Esc 键 或 者 点 击 右 上 角 的 ;图 标 ， 它 会 展示 
一 个 点 击 包含 Show es 选中 它 后 则 会 展示 下 方 的 控制 台 ( 如 图 13-6 所 示 )。 
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©O@ /Mcoecrun * 是 全 | 
€ CG [9 localhost:3000 kg 二 
[x uu Elements Console Sources Network Timeline Profiles Resources Security Audits :; x 
CoffeeRu n 大 四 可 |view: 旺 三 | 国 Preservelog 回 Disablecache | No throttling 了 
Goties Order [Fiter Hide data URLs @ XHR JS CSS Img Media Font Doc WS Manifest Other 
Name Status Type Initiator Size Time Timeline - Start Time 1.00s 和 A 
[_ | localhost 200 docum... Other 3.5KB 7ms 所 
Email 
[| bootstrap.min.css 200 styles... (index):6 19.4KB 258ms ”mei 
dr@who.com [| jquery.minjs 200 script index):77 29.2KB 279ms 人 
Shoit | remotedatastore.js 200 script index):81 1.2KB 22ms 别 
oi EE 
@ Tall 目 formhandlerjs 200 Script index):79 1.6KB 22ms 别 
~ Grande |_ | checklistjs 200 script index):80 2.0KB 22ms 别 
| | main.js 200 script (index):84 1.3KB 29ms 
Flavor Shot 日 中 
| validation.js 200 script index):78 517B 25ms [| 
None $ [© datastorejs 200 script (index):82 763B 24ms 时 
Caffeine Rating truckjs 200 Script index):83 12KB 24ms 明 
i 目 browser-sync-client.2.11.1... 200 script index):15 29.7KB 4ms [| 
| | ?EIO=38&transport=polling... 200 xhr. browser-svn.… 310B 3ms 用 
Submit ， Reset 17 requests | 96.9KB transferred | Finish: 534ms | DOMContentLoaded: 369ms | Load: 425ms 
。 :二 -bs 
图 13-5 在 网 络 面板 中 查看 Ajax 请 求 
eose / DD cofieeRun x \ [人 | 
€ 本 CO Diocahost3000/? Wg 三 





[x 加 | Elements Console Sources Network Timeline Profies Resources Security Audits : x 


CoffeeRun 加 |View: 汪 三 | 国 Preservelog 回 Disablecache | No throttling 了 
Coffee Order [Fter | ORegex OO Hide data URLs 


网 xhR Js css Img Media Font Doc WS Manifest Other 


Email 


ho .Com Recording network activity... 


Perform a request or hit $8 R to record the reload. 
Short 


© Tal 


Grande ; console x 


Flavor Shot © 可 top vv Preservelog 


None 





bla 


活 


Caffeine Rating 


一 (一 一 


Submit Reset 





图 13-6 在 网 络 面板 下 方 的 控制 台 
在 控制 台中 输入 以 下 代码 : 


var remoteDS = new App.RemoteDataStore 
("http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders"); 
remoteDS.add('a@b.com', {emailAddress: 'a@b.com', coffee: 'espresso'}); 


你 会 在 网 络 面板 上 看 到 新 的 条 目 ( 如 图 13-7 所 示 )。 





236 第 13 章 Ajax 





[x 口 Elements Console Sources Network Timeline Profiles Resources Security Audits : x 
和 QI 了 View: 旺 三 | 国 Preservelog 回 Disablecache | No throttiing 入 
[Fikter | Regex DHide data URLs 


网 xHr JS css mg Media Font Doc WS Manifest Other 





Name Status | Type Initiator Size Time Timeline - Start Time 1.00s 全 
|] coffeeorders 200 xhr jquery.js:86... 453B 114ms | i 
1 requests | 453B transferred 

:Console X 


© 可 top vv 国 Preservelog 

> var remoteDS = new App.RemoteDataStore("http://coffeerun-v2-rest-api.herokuapp. com/api/coffeeorders"); 
undefined 

> remoteDS.add('a@b.com', {emailAddress: 'a@b.com', coffee: 'espresso'}); 
undefined 


remotedatastore. js:17 
Object {_v: @, coffee: "espresso", emailAddress: "a@b.com", _id: "5712c496e36db483007d087c"} 





图 13-7 ”网络 面板 中 的 Ajax 请 求 


想 了 解 与 请 求 相关 的 更 多 信息 ， 可 以 点 击 条 目 ( 如 图 13-8 所 示 )。 隐藏 下 方 控制 台 ， 可 以 看 
到 更 多 信息 。 








[x 品 Elements Console Sources Network Timeline Profies Resources Security Audits -4 


二 i 四 可 | View: 






二 | 国 Preservelog 图 Disable cache | No throttling 了 


|Fitter 国 Regex ,Hide data URLs 
网 xhn Js css Img Media Font Doc WS Manifest Other 


Name Xx Headers Preview Response Timing 


CE ore 


Request URL: http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders 
Request Method: POST 
Status Code: ®@ 200 OK 
Remote Address: 174,129,220,243:80 
YResponse Headers View source 
Access-Control-Allow-Headers: 0rigin，X-Requested-With，Content-Type，Accept 
Access-Control-Allow-Methods: GET, POST, PUT, DELETE 
Access-Control-Allow-Origin: * 
Connection: keep-alive 
Content-Length: 87 
Content-Type: application/json; charset=utf-8 
Date: Sat, 16 Apr 2016 23:02:46 GMT 
Server: Cowboy 
Via: 1.1 vegur 
X-Powered-By: Express 


了 Request Headers View source 
Accept: */* 
Accept-Encoding: gzip, deflate 
Accept-Language: en-US,en;q=0.8 
Cache-Control: no-cache 
Connection: keep-alive 
Content-Length: 38 
Content-Type: application/x-ww-form-urlencoded; charset=UTF-8 
Host: coffeerun-v2-rest-api.herokuapp. com 
Origin: http://Locathost:3000 
Pragma: no-cache 
Referer: http://localhost:3000/? 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac 0S X 10_10_5) AppleWebKit/537.36 (K 
HTML, like Gecko) Chrome/52.0.2709.0 Safari/537.36 
Y Form Data view source view URL encoded 


emailAddress: a@b. com 
coffee: espresso 


图 13-8 请求 的 细节 





1 requests | 453B transferr.. | 
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详情 的 项 部 是 一 些 一 般 信息 ,底部 是 表格 数据 。 中 间 则 展示 的 是 请 求 首部 和 响应 首部 ,它们 
用 于 指定 请 求 和 响应 的 元 数据 和 选项 。 

在 这 些 信 息 中 , 状态 码 ( 在 General 徐 格 中 ) 和 表格 数据 窗 格 通常 是 在 开发 和 调试 Ajax 请 求 时 
最 有 用 的 数据 。 


13.5 ”从 服务 器 检索 数据 


现在 的 RemoteDataStore 模 块 已 经 可 以 将 独立 的 咖啡 订单 存储 到 服务 器 了 ,那么 接 下 来 就 要 
添加 getAtll 原 型 方法 从 服务 器 读 取 所 有 订单 。 开 始 修改 remotedatastore.js 吧 1 






































RemoteDataStore.prototype.add = function (key, val) { 
}; 
RemoteDataStore.prototype.getAll = function () { 
// 放置 要 运行 的 代码 
}; 


App.RemoteDataStore = RemoteDataStore; 
window.App = App; 








接 下 来 要 使 用 jQuery 的 $.get 方 法 。 和 $.post 一 样 ， 要 对 其 传人 服务 器 的 URL。 我 们 不 需要 
传人 数据 ， 因 为 我 们 是 要 检索 信息 而 非 保 存 信息 。 除 此 之 外 , 还 要 传人 回调 函数 ,这 样 就 能 在 接 
收 到 服务 端 响 应 后 进行 调用 。 

在 RemoteDataStore.prototype.getALL 方 法 中 调用 $.get。 














RemoteDataStore.prototype.getAll = function () { 


$.get(this.serverUrL，function (serverResponse) { 
console.log(serverResponse); 
}); 
}; 


App.RemoteDataStore = RemoteDataStore; 
window.App = App; 


保存 ， 切 换 到 浏览 器 的 开发 者 工具 。 


13.5.1 查看 响应 数据 


和 刚才 一 样 ， 在 控制 台 使 用 同样 的 URL 实 例 化 一 个 RemoteDataStore。( 专业 建议 : 为 了 不 
用 每 次 都 输入 长 长 的 URL， 可 以 使 用 上 下 箭头 切换 刚刚 输入 在 控制 台中 的 语句 。) 然后 调用 
getALL 方 法 : 
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var remoteD9 = new App.RemoteDataStore 
("http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders"); 
remoteDS .getAll (); 


可 以 在 开发 者 工具 的 网 络 面板 上 看 到 GET 请 求 ， 它 应 该 会 被 迅速 响应 ， 于 是 就 能 在 控制 台中 
看 到 一 些 咖 啡 订单 信息 了 (之 前 输入 到 服务 右 的 数据 ， 如 图 13-9 所 * )。 


[x 串 ] Elements Console Sources Network Timeline Profiles ” Resources Security Audits [二 有 





二 QT View 三 二 Preserve log 轿 Disable cache No throttling 了 
| - Regex 局 Hide data URLs 


LC XHR JS CSS Img Media Font Doc WS Manifest Other 


Name Bs Headers Preview Response Timing 


| coffeeorders | v {a@b, com: {_id: "5712ceb58648b50300b62a59", coffee: "espresso", emailAddress: "a@b 
Pp a@b,.com: {_id: "5712ceb58648b50300b62a59", coffee: "espresso", emailAddress: "ab 


1 requests | 489B transfer.., 





Console x 
OFiop Preserve log 


> var remoteDS = new App.RemoteDataStore("http://coffeerun-v2-rest-api.herokuapp. com/api/coffeeorders"); 
undefined 


v 


remoteDS. getA1l1l(); 
undefined 


Object fa@b.com: Object} remotedatastore. js:23 





图 13-9 查看 getALL 响 应 的 数据 


你 看 到 的 结果 可 能 会 有 一 些 区 别 , 这 取决 于 你 提交 的 信息 。 不 过 获得 数据 就 意味 着 已 经 成 功 
地 从 服务 器 检索 到 了 数据 。 





13.5.2 添加 回调 函 冰 数 


现在 可 以 从 服务 器 获取 到 数据 ， 但 是 却 不 能 从 getALL 返 回 相 应 的 数据 。 这 是 因为 getALL 只 
是 初始 化 了 Ajax 的 请 求 ， 而 没有 处 理 响 应 。 

不 过 我 们 给 $. get 传 递 了 响应 处 理 回调 函数 。 这 个 回调 函数 和 我 们 之 前 写 过 的 事件 处 理 回 调 
函数 一 样 一 一 它们 都 期 望 接 受 一 个 参数 , 这 意味 响应 数据 只 能 在 回调 函数 内 部 访问 。 那 怎么 在 回 
调 函 数 外 部 访问 它 呢 ? 

如 果 给 getALL 传 递 一 个 函数 实 参 ,就 可 以 在 $.get 的 回调 函数 内 部 调用 这 个 参数 ,也 就 能 
本 函数 参数 和 服务 器 啊 应 了 。 

添加 或 回调 函数 ， 并 在 remotedatastore.js 中 调用 它 。 




















RemoteDataStore.prototype.getAll = function (cb) { 
$.get(this.serverUrl, function (serverResponse) { 
console.log(serverResponse); 
ch(serverResponse); 
}); 
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}; 


App.RemoteDataStore = RemoteDataStore; 
window.App = App; 


getALL 方 法 获得 了 远 端 服务 器 的 所 有 订单 数据 , 并 且 将 数据 传递 给 了 它 获 得 的 回调 函数 cb。 

我 们 还 需要 实现 get 方 法 ,根据 用 户 的 邮箱 地 址 获取 单个 咖啡 订单 。 和 getALL 一 样 ， 它 接受 
函数 实 参 ， 同 样 用 于 传递 获得 的 咖啡 订单 。 

在 remotedatastore.js 中 实现 get: 


RemoteDataStore.prototype.getAll = function (cb) { 


}; 


RemoteDataStore.prototype.get = function (key, cb) { 
$.get(this.serverUrl + '/' + key, function (serverResponse) { 


console.log(serverResponse); 
ch(serverResponse); 
}); 
}; 


App.RemoteDataStore = RemoteDataStore; 
window.App = App; 


保存 remotedatastore.js。 在 控制 台中 输入 以 下 代码 , 传人 一 个 空 的 匿名 函数 给 remoteDS .get。 
( 它 期 望 一 个 函数 实 参 ， 但 我 们 只 想 进行 一 次 快速 的 测试 。) 


var remoteDS = new App.RemoteDataStore 
("http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders"); 


remoteDS.get('a@b.com', function () {}); 
控制 台 应 如 图 13-10 所 示 。 


[x 口 Elements Console Sources Network Timeline Profiles Resources Security Audits 








v 


和 人 BE 了 IIview 三 二 Preserve log 回 Disable cache No throttling 


Hide data URLs Al XHR JS CSS Img Media Font Doc WS Manifest Other 


X Headers Preview Response Timing 
1 {"_id":"56c16533d5612595dc977999", "coffee":"espresso","emailAddress":"a@b.com","_v":0} 





1 requests | 445B tansferr 


; Console 
OFip Preserve log 


》 remoteDS.get('aGb.com'，function () {}); 


undefined 


remotedatastore. js:31 
Object {_id: "56c16533d5612595dc977999", coffee: "espresso", emailAddress: "a@b.com", _v: 8} 


> 





图 13-10 ”测试 RemoteDataStore.prototype.get 
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13.6 ”从 服务 器 删除 数据 


通过 Ajax, 可 以 将 订单 保存 到 服务 器 上 并 查询 订单 ,那么 最 后 一 件 事 就 是 要 在 订单 完成 后 从 
服务 器 删除 订单 。 

要 完成 这 项 任务 , 需要 向 单个 订单 的 URL 发 送 一 个 HTTP 请 求 。 就 好 像 在 RemoteDataStore. 
prototype .get 中 所 做 的 一 样 , 我 们 会 使 用 服务 器 的 URL ,但 还 需要 添加 一 个 斜 杠 和 用 户 邮 箱 地 址 。 

向 服务 器 发 送 一 个 DELETE 请 求 。 DELETE 是 一 个 HTTP 操 作 , 服务器 在 收 到 该 请 求 后 会 知道 你 
想 删 除 与 邮箱 地 址 相关 的 数据 。 












































使 用 jQuery 的 $. ajax 方法 


为 了 方便 操作 ，jQuery 提 供 了 $,.get 和 $. post 这 两 个 最 常用 的 HTTP 操 作 方法 。 当 浏览 器 需 
要 HTML、CSS、JavaScript 或 者 图 片 文件 时 ， 就 会 使 用 6ET 请 求 ; 而 提交 表格 的 时 候 一 般 就 会 使 
用 POST 请 求 。 

jQuery 并 没有 提供 一 个 通过 Ajax 发 送 DELETE 请 求 的 方便 操作 ， 因 此 我 们 使 用 $.ajax 方 法 。 
($.get 和 $.post 本 质 上 都 是 调用 了 $.ajax 方 法 ， 并 且 注 明了 使 用 GET 或 者 POST 请 求 。) 

在 remotedatastore.js 中 添加 remove 的 原型 方法 。 在 其 中 调用 $ .ajax 方法 ,传人 两 个 参数 。 第 
一 个 参数 是 一 个 咖啡 订单 的 URL， 由 服务 器 URL、 斜 杠 和 键 名 ( 邮箱 地 址 ) 组 成 ; 第 二 个 参数 是 
一 个 包括 了 Ajax 请 求 的 选项 或 设置 的 对 象 。 你 唯一 需要 为 remove 方 法 配置 的 就 是 将 type 设 为 
DELETE。 




































































RemoteDataStore.prototype.get = function (key, cb) { 


}; 


RemoteDataStore.prototype.remove = function (key) { 
$.ajax(this.serverUrl + '/' + key, { 
type: 'DELETE' 
}); 
}; 


App.RemoteDataStore = RemoteDataStore; 
window.App = App; 


(Ajax 的 请 求 有 许多 选项 ， 你 可 以 在 apijquery.conyjquery.ajax 上 了 解 更 多 。) 
保存 ， 然 后 回 到 控制 台 。 实 例 化 一 个 新 的 RemoteDataStore 对 象 并 执行 remove 方 法 ， 传 人 
刚刚 创建 的 测试 订单 的 邮箱 地 址 ， 最 后 调用 getALL 方 法 来 检测 订单 是 否 被 删除 。 


var remoteD9 = new App.RemoteDataStore 
("http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders"); 

remoteDS. remove( 'a@b. com' ); 

remoteDS.getAll(function (data) { console.log(data); }); 
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如 果 你 查看 服务 器 对 DELETE 请 求 的 响应 , 会 发 现 服务 器 返回 了 一 段 信息 说 明 它 干 了 什么 (如 
图 13-11 所 示 )。(〈 不 过 就 像 之 前 所 说 ， 不 同 的 服务 器 可 能 会 返回 不 同 的 信息 。) 


[x 串 Elements Console Sources Network Timeline Profiles Resources Security Audits : x 














和 QI 了 view: 旺 三 | 国 Preservelog 加 Disablecache | No throttling 了 


All XHR JS CSS Img Media Font Doc WS Manifest Other 





| 回 Regex OD Hide data URLs 





Name | x Headers Preview Response Timing 
|_| coffeeorders 1 {"message":"Successfully deleted coffeeorder a@b,com"} 
| | a@b.com 





3 requests | 1.2KB transfer.. | 





Console x 


© 是 top vv Preservelog 


> remoteDS.add('a@b.com', {emailAddress: 'a@b.com', coffee: 'espresso'}); 
undefined 


remotedatastore.is:17 
Object {_v: 8, coffee: "espresso", emailAddress: "a@b.com", _id: "5712d4ed8648b50300b62a5a"} 


> remoteDS, remove("a@b,. com"); 
undefined 
> 


图 13-11 检查 DELETE 请 求 的 响应 


13.7 用 RemoteDataStore 替换 DataStore 


RemoteDataStore 模 块 已 经 完成 了 ， 是 时 候 用 它 蔡 换 掉 DataStore 了 。 
打开 main.js。 在 App 命 名 空间 下 引入 RemoteDataStore。 


(function (window) { 
"Use strict'; 
var FORM SELECTOR = '[data-coffee-order="form"]'; 
var CHECKLIST SELECTOR = '[data-coffee-order="checklist"]'; 
var App = window.App; 
var Truck = App.Truck; 
var DataStore = App.DataStore; 
var RemoteDataStore = App.RemoteDataStore; 
var FormHandler = App.FormHandler; 


当然 , 还 要 添加 一 个 名 为 SERVER_URL 的 新 变量 , 并 且 将 CoffeeRun 测 试 服务 器 的 URIL 分 配给 它 。 


(function (window) { 
"Use Strict ' ， 
var FORM SELECTOR = '[data-coffee-order="form"]'; 
var CHECKLIST SELECTOR = '[data-coffee-order="checklist"]'; 
var SERVER_URL = 'http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders'; 
var App = window.App; 
var Truck = App.Truck 
var DataStore = App.DataStore; 
var RemoteDataStore = App.RemoteDataStore; 
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接 下 来 ， 创 建 一 个 新 的 RemoteDataStore 实 例 ， 并 传人 SERVER_URL。 


var RemoteDataStore = App.RemoteDataStore; 

var FormHandler = App.FormHandler; 

var Validation = App.Validation; 

var CheckList = App.CheckList; 

var remoteDS = new RemoteDataStore(SERVER_ URL); 

var myTruck = new Truck('ncc-1701', new DataStore()); 
window.myTruck = myTruck; 





最 后 ， 将 remoteDS ， 而 不 是 DataStore 实 例 ， 传 人 Truck 构造 画 状 。 因为 DataStore 和 
RemoteDataStore 拥 有 相同 的 方法 ， 并 且 接 受 (几乎 ) 一 致 的 参数 ， 这 种 变化 将 无 颖 工作 。 





var RemoteDataStore = App.RemoteDataStore,; 

var FormHandler = App.FormHandler; 

var Validation = App.Validation; 

var CheckList = App.CheckList; 

var remoteDS = new RemoteDataStore(SERVER URL); 

var myTruck = new Truck('ncc-1701', new DataStoreO); remoteDS}; 


window.myTruck = myTruck; 


保存 修改 ,， 回 到 浏览 器 ,输入 一 些 咖啡 订单 信息 并 提交 表单 。 这 么 做 的 时 候 记 得 要 打开 网 络 


面板 ， 那 样 就 能 看 到 在 添加 订单 或 者 交付 订单 时 网 络 请 求 的 变化 。 


®O® /Mcoeerun x 
C 


localhost:3000 


x he 








[ 民 品 Elements Console Sources Network Timeline Profiles Resources Security Audits 
CoffeeRun 大 昌 中 可 |View: 旺 忆 | 目 Preservelog 团 Disable cache | No throtting v 
Coffee Order Filter HidedataURLs B® XHR JS CSS Img Media Font Doc WS Manifest Other 
Name x Headers Preview Response Timing 
Br [|] coffeeorders | 人 Vi 9，strength: 59, flavor: "", size: "short", emailAddress: "daryl@bignerdranch.com",... 
mail 


dr@who.com 


Short 
© Tal 


Grande 
Flavor Shot 


None 


Caffeine Rating 





Submit Reset 


Pending Orders: 
motor oil, (daryl@bignerdranch.com) [59] 


brainspresso, (rick@bignerdranch.com) 
[30] 





es 


# 喜 |! 现在 CoffeeRun 已 经 能 


coffeeorders 

- 了 "56c1148d5acdfb92d94d168e” 
coffee: "motor oit” 
emailAddress: "daryl@bignerdranch.com" 
flavor: "™ 
size: "short" 
strength: 59 

2 requests | 966B transferr... 


;Console 


@ 可 top 


Preserve lot 

9 remoteqatastore. Js:18 

"daryl@bignerdranch, com"..} 
formhandler,. js:26 
formhandler. js:26 
formhandler, js:26 
formhandler. js:26 
formhandler, js:26 
formhandler. js:28 


bobject {_v: 9, strength; 59, flavor:; "", size: "short", emailAddress; 
coffee is brainspresso 

emailAddress is rick@bignerdranch.com 

size is tall 

flavor is caramel 


strength is 30 


Object fcoffee: "brainspresso", emailAddress: "rick@bignerdranch.com", size: "tall", flavor; "caramel", 
Strength: "30"} 
Adding order for rick@bignerdranch.com truck. jis:13 


remotedatastore,. js:18 


pobject {_v: 8, strength; 30, flavor: "caramel", size; "tall", emailAddress;: "rick@bignerdranch,com".} 


图 13-12 ”将 订单 保存 到 远 端 服务 器 
人 够 正常 运行 并 且 和 远 端 服务 需 进 行 交 互 了 。 
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下 一 章 是 CoffseRun 的 最 后 一 章 ， 虽 然 不 会 添加 什么 新 的 功能 ， 但 会 更 专注 于 重 构 代码 ， 以 
学 习 异 步 代码 的 新 模式 。 


13.8 ”中 级 挑战 : 校 验 远 端 服务 


我 们 的 校 验 代码 只 是 简单 地 做 了 域名 检测 。 更 新 校 验 代码 , 让 它 可 以 检测 这 个 邮箱 地 址 是 否 
被 服务 器 中 存储 的 订单 使 用 过 ,以 防 提交 了 不 合法 订单 。 并 且 在 收 到 不 合法 订单 时 ,弹出 一 个 校 
验 警 告 。 

你 可 能 想 打 开 两 个 浏览 器 窗口 ， 然 后 输入 不 同 的 咖啡 订单 。 

要 注意 校 验 时 请 求 的 发 送 频率 。( 可 以 在 开发 者 工具 的 网 络 面板 上 查看 该 信息 。) 你 有 没有 什 
么 好 方法 来 减少 请 求 的 数量 呢 ? 


下 














13.9 延展 阅读 : Postman 


Postman 是 用 于 发 送 测试 请 求 的 最 佳 工具 之 一 ， 是 一 个 免费 的 Chrome 插 件 。 它 让 我 们 在 构建 
HTTP 请 求 时 ， 还 能 注 明 HTTP 操 作 、 表 单数 据 、 请 求 首部 和 用 户 凭据 (如 图 13-13 所 示 )。 











@ee 
History Collections httpy/coffeerun-v1-。 Noenvironment v @ 
GET v http://coffeerun-vi-rest-apiherokuapp.com/api/coffeeorders/ Params 国生 全 本 
Tod: 
加 f 
GET httpy/eoff Authorization = Headers(0) Pre-request script Tests (3) DD 
apiherokuapp.cor 
No Auth v 
Body Cookies Headers(9) Tests{0/0 Status 2000K Time 19ms 
Pretty Raw Preview Jsonv || 引 | 中 Q 


K 
es 





ee : 65, 


了 
11- “rickebignerdranch.c 


{ 
12 id": "56c14e $256129Sac977995" 
13 "coffee": "cawnfeee", 
14 "enailAdaress” , "rick@bignerdranch. com" 
15 "size": "grai ande 
16 "flavor": Ce 
17 Sstrength": 30, 
18 " 
wa 1} 
28- "michonnegbignerdranch.c { 
21 id": "56c¢ esa 9de97996" 
22 "coffee": "kombucha" 


23 "emailAddress": "michonne@bignerdranch.com", 


图 13-13 Postman 


Postman 是 在 编写 服务 器 通信 代码 之 前 探索 API 的 不 可 或 缺 的 工具 。 可 以 从 Chrome 的 Web 商 店 
chrome.google.com/webstore 中 下 载 它 (搜索 “Postman” 就 可 以 找到 它 )。 











Deferred 和 Promise 








在 CoffeeRun 中 模块 化 代码 可 以 远离 可 怕 的 “面条 式 代 码 ”( spaghetti code ) 一 一 在 将 事件 处 
理 器 ( UI) 代码 和 应 用 内 部 逻辑 混合 在 一 起 使 用 的 时 候 ， 特 别 容易 出 现 这 种 代码 。 

我 们 的 模块 间 通 过 函数 进行 交互 , 这 种 方式 一 般 被 称 作 回调 。 如 果 代 码 只 依赖 于 一 个 单一 的 
异步 操作 ， 回 调 是 一 种 不 错 的 解决 方法 。 图 14-1 展 示 了 一 个 CoffeeRun 异 步 工 作 流 的 简化 版 。 

















提交 表单 创 | 


1 建 订单 — ms tet 一 > 添加 行 一 重 置 表格 


图 14-1 



































在 添加 订单 时 的 异步 工作 流 





当 有 许多 从 属 的 异步 操作 时 该 怎么 做 呢 ? 一 种 选择 是 骨 套 回调 函数 , 但 很 快 我 们 就 会 发 现 这 
种 方法 既 笨 重 又 危险 。 如 果 想 要 编写 一 个 简单 但 又 必须 带 有 错误 处 理 的 提交 处 理 程序 ,最 终结 
很 可 能 会 是 这 样 : 























formHandler.addSubmitHandler(function (data) { 
try { 


myTruck.createOrder(function (error) { 
if (error) { 


throw new Exception(error) 
} elsef{ 
try { 
saveOnServer(function (error) { 
if (error) { 
throw new Exception({message: 'server error'}); 
} else { 
try { 
CheckList.addRow() ; 
} catch (e2) { 
handLeDomError(e2) ; 
} 
} 
}) 
} catch (e) { 
handleServerError(e, function () { 
// 尝试 再 次 添加 行 
try { 
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checkList.addRow() ; 
} catch (e3) { 
handLeDomError(e3) ; 
} 
}); 
} 
} 
}); 
} catch (e) { 
alert('Something bad happened.'); 




















} 
}); 
在 本 章 中 ， 我 们 会 学 习 更 好 的 解决 方式 一 一 Promise。 相 同 的 操作 会 通过 Promise 链 进行 表 
示 ， 如 下 : 


formHandler.addSubmitHandler() 
.then(myTruck.createOrder) 
.then(saveOnServer) 
.Catch(handleServerError) 
.then(checkList.addRow) 
.Catch(handleDomError); 


Promise 提 供 了 一 种 管理 复杂 异步 操作 的 方法 。 而 在 本 章 中 ， 我 们 会 学 习 如 何 使 用 它 来 优化 
CoffeeRun 的 架构 。Promise 是 一 个 相对 较 新 的 功能 ， 不 过 在 最 新 的 浏览 器 ( 包括 Chrome ) 中 都 
得 到 了 很 好 的 支持 。 

在 CoffeeRun 中 , 我 们 主要 关注 当前 操作 成 功 后 ,下 一 步 操 作 是 否 执 行 。 Promise 简 化 了 这 一 
不 再 依赖 回调 函数 ， 而 是 通过 返回 Promise 对 象 ， 一 步 步 解 耦 模块 。 








操作 





14.1 Promise 和 Deferred 


Promise 对 象 有 三 种 状态 : pending、flfilled 和 rejected ( 如 图 14-2 所 示 )。 





Fulfilled 











resolve() 





new Promise() 一 -| Pending 











reject() 





Rejected 











图 14-2 ”Promise 对 象 的 三 种 状态 
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每 个 Promise 对 象 都 有 一 个 then 方 法 , 它 会 在 Promise 状 态 变 为 fnlfilled 时 被 触发 。 我 们 可 以 
调用 then 并 且 传 人 一 个 回调 函数 。 当 Promise 的 状态 变 为 flfilled 时 ， 回 调 函 数 就 会 被 执行 ， 同 





时 会 收 到 Promise 异 步 操 作 后 所 取得 的 数据 。 























可 以 链 式 调用 多 个 then 函 数 。 相 比 于 编写 函数 ,再 让 其 接受 数据 并 调 月 
Promise 对 象 以 利用 then 作 为 链 式 调用 更 为 妥当 。 
先 从 jQuery 的 Deferred 对 象 开始 ， 它 和 Promise 十 分 相似 。 














回调 函数 , 返回 一 个 


jQuery 的 $.ajax 方 法 (包括 $.post 和 $.get 方 法 ) 会 返回 一 个 Deferred 对 象 。Deferred 对 象 





会 根据 自身 的 两 种 状态 
模块 开始 ， 这 样子 它 就 能 返回 由 jQuery 的 Ajax 方法 生成 的 Deferred。 接 着 ， 
们 在 Deferred 上 注册 回调 函数 。 





14.2 返回 Deferred 





fulfilled 和 rejected 一 一 分 别 调用 对 应 水 数 。 从 更 新 RemoteDataStore 


修改 其 他 模块 ， 让 它 


现在 ， 开 始 使 用 jQuery 的 $.ajax 方 法 返回 的 Deferred 对 象 。 在 remotedatastore.js 中 更 新 原型 














方法 ， 让 它 将 $.get、$.post、$.ajax 的 执行 结果 返回 如 下 : 


RemoteDataStore.prototype.add = function (key, val) { 
return $.post(this.serverUrl, val, function (serverResponse) { 
console.log(serverResponse); 
}); 
}; 


RemoteDataStore.prototype.getAll = function (cb) { 

return $.get(this.serverUrl, function (serverResponse) { 
console.log(serverResponse); 
cb(serverResponse); 

}); 

}; 


RemoteDataStore.prototype.get = function (key, cb) { 

return $.get(this.serverUrl + '/' + key, function (serverRespon 
console.log(serverResponse); 
cb(serverResponse); 

}); 

}; 


RemoteDataStore.prototype.remove = function (key) { 
return $.ajax(this.serverUrl + '/' + key, { 
type: 'DELETE' 
}); 
}; 


因为 它们 现在 返回 由 jQuery 的 Ajax 方法 生成 的 Deferred 对 象 , 所 以 get 








se) { 


和 getALL 并 不 一 定 要 


接受 回调 函数 。 为 了 确认 是 否 有 回调 函数 ， 需 要 在 执行 cb 前 添加 if 语句 进行 判断 。 
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RemoteDataStore.prototype.getAll = function (cb) { 
return $.get(this.serverUrl, function (serverResponse) { 
if (cb) { 
console.log(serverResponse); 
cb(serverResponse); 
} 
}); 
}; 


RemoteDataStore.prototype.get = function (key, cb) { 
return $.get(this.serverUrl + '/' + key, function (serverResponse) { 
if (cb) { 
console.log(serverResponse); 
cb(serverResponse); 
} 
}); 
}; 
保存 remotedatastore.js。 既 然 RemoteDataStore 的 方法 会 返回 Deferred， 我们 就 也 需要 更 新 
Truck 方法 。 首 先 ， 处 理 create0rder 和 deLiver0rder。 


打开 truck.js， 然 后 在 这 两 个 方法 中 调用 this. db 的 语句 前 添加 return。 


Truck.prototype.createOrder = function (order) { 
console.log('Adding order for ' + order.emailAddress); 
return this.db.add(order.emailAddress, order); 


}; 


Truck.prototype.deliverOrder = function (customerId) { 
console.log('Delivering order for ' + CustomerId ) ; 
return this.db.remove(customerId); 
}; 
保存 truckjs。Truck 现 在 会 将 RemoteDataStore 生 成 的 Deferred 返 回 。 在 使 用 Promise 和 
Deferred 时 ， 最 好 的 做 法 就 是 将 它们 返回 ， 这 能 让 调用 create0rder 或 者 deLiver0rder 的 对 象 
所 注册 的 回调 函数 在 异步 操作 完成 后 被 调用 
下 一 节 就 是 这 么 做 的 。 


14.3 ”通过 then 注册 回调 函数 


$.ajax 返 回 了 一 个 Deferred, 它 拥有 then 方 法 。then 方 法 用 于 注册 一 个 当 Deferred 被 解析 
( resolved ) 时 调用 的 回调 函数 。 当 回调 函数 执行 时 ， 它 会 收 到 从 浏览 需 返 回 的 相应 数据 。 

先 从 then 开 始 。 在 main.js 中 ， 提 交 处 理 程序 调用 了 create0rder 和 addRovw 方 法 。 改 变 它们 ， 
以 便 让 addRow 成 为 create0 rder 的 一 个 注册 回调 的 方法 。 
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$.ajax() 一 返回 Deferied | 让 下 Deferred 

















执行 回调 函数 
SR 








callbackl(serverData); 


callback2(serverData); 
.then(callback1) .then(caLLback2) .then(caLLback3) callback3(serverData); 


图 14-3 ”Deferred 对 象 执 行使 用 then 注 册 的 回调 函数 














打开 main.js, 然后 更 新 formHandler.addSubmitHandler 的 回调 函数 。 在 create0rder 后 添 
加 .then。 传 人 一 个 执行 checkList ,addRow 的 回调 函数 。 


formHandler.addSubmitHandler(function (data) { 
myTruck.createOrder.call(myTruck, data)s 
.then(function () { 
checkList.addRow.call(checkList, data); 


}); 
}); 
这 让 addRow 在 create0rder 正 党 运行 完毕 后 才 被 调用 ， 而 不 是 立即 被 调用 。 


14.4 ”使 用 then 处 理 失败 的 情况 


then 接 受 第 二 个 参数 ， 它 会 在 Deferred 切 换 到 rejected 状 态 时 执行 。 在 mainjs 中 的 
formHandler.addSubmitHandler 上 添加 第 二 个 函数 实 参 ( 记得 在 两 个 参数 间 添 加 逗号 ) 来 查 
看 效果 。 在 函数 内 部 会 弹出 带 有 错误 信息 的 警报 。 








formHandler.addSubmitHandler(function (data) { 
myTruck.createOrder.call (myTruck, data) 
.then(function () { 
checkList.addRow.call(checkList, data); 
}, 
function () { 
alert('Server unreachable. Try again later.'); 
} 
); 
}); 
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在 main.js 的 顶部 故意 拼 错 服务 咒 的 名 称 ， 这 样子 Ajax 就 会 失败 。( 这 个 改变 只 是 暂时 的 ， 所 
以 只 需要 剪 切 URL 的 一 部 分 ， 待 会 再 粘贴 回去 就 好 。) 
(function (window) { 
"Use strict'; 
var FORM SELECTOR = '[data-coffee-order="form"]'; 
var CHECKLIST SELECTOR = '[data-coffee-order="checklist"]'; 
var SERVER URL = 'http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders/'; 
var App = window.App; 


保存 更 改 ， 确 保 browser-sync 正 在 运行 。 然 后 在 浏览 器 中 打开 CoffeeRun， 填 写 表单 ， 在 提交 
时 会 看 到 一 个 错误 弹 窗 。 


























DD CoffeeRun 六 ee 固 
< C  D localhost:3000 | : 
[上 Elements Console Sources Network Timeline » @4| : Xx 
CoffeeRun 二 i 了 了 Vew: 旺 三 目 Preservelog 固 Disablecache | No throttlir 
Name Sta.. Ty... Initiator Size Ti... Timeline - Start Time A 
Coffee Order l 
站 了 EIC=aatans Zoo A DUWSE.. ZU ams 
oh no 图 | ?EIO=3&trans..，200 xhr browse... 2.2KB 39... 
| | ?EIO=38&trans... 101 | we... Other 0B | 1.3... 
Email 
ee - 55B 6ms 
蝶 me = ene 0 2 localhost:3000 says: 2B 92… 
i 0B 14. 
~ Short Server unreachable. Try again later. 1 
© Tall Prevent this page from creating additional dialogs. ContentLoaded: 430ms | Load: 488... 
i BE x 
Flavor Shot 
None yy strength is formhandler,.js:26 
formhandler,. js:28 
1 1 Object {coffee: "oh no", emailAddress: "mrbill@bignerdranch,com", 
ff Rati 2 
Laffone Rating 二 tall™”, FLavors ™™ strongths "30°"} 
bd Adding order for mrbill@bignerdranch,.com trucksisi13 
| Submit | Reset @ POST jquery. is:8630 
\ http://coffeerun.herokuapp, com/api/coffeeorders/ 
@ XMLHttpRequest cannot Load (index) :1 


http://coffeerun.herokuapp.com/api/coffeeorders/. No 'Access-Control— 
ALLOw-0rigin' header is present on the requested resource, Origin 
'http://localhost:3000' is therefore not allowed access. The response 
Pending Orders: had HTTP status code 404. 


> 


图 14-4” 当 Ajax 失 败 的 时 候 弹 出 警告 








将 SERVER_URL 恢 复 为 http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders/。 当 然 ， 也 可 
以 删除 弹出 警告 的 困 数 。 


(function (window) { 
"use Strict ' ， 
var FORM SELECTOR = '[data-coffee-order="form"]'; 
var CHECKLIST SELECTOR = '[data-coffee-order="checklist"]'; 
var SERVER URL = 'http://coffeerun-v2-rest-api.herokuapp.com/api/coffeeorders/'; 
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formHandler.addSubmitHandler(function (data) { 
myTruck.createOrder.call (myTruck, data) 
.then(function () { 
checkList.addRow.call(checkList, data); 
} 
function OiO—f 
atert('Server unreachable. Try again Later 一) 十 





) ; 
}); 
使 用 then 注 册 的 回调 函数 与 Promise 的 工作 方式 相对 应 。 如 果 Promise 的 状态 变 为 甸 lfilled ， 
将 会 执行 第 一 个 回调 ; 如 果 变 为 rejected ， 就 会 执行 第 二 个 回调 。 


14.5 在 仅 支 持 回调 函数 的 API 上 使 用 Deferred 


有 时 候 要 让 基于 Deferred 的 代码 和 只 支持 回调 函数 的 API 接 口 协同 合作 一 一 例如 事件 监 
听 吉 。 

目前 , 无 论 Ajax 请 求 是 否 成 功 , formHandLer.addSubmitHandLer 都 会 重 置 表单 并 且 聚 焦 到 
第 一 个 元 素 上 。 然 而 ,我 们 只 和 希望 在 Ajax 请 求 成 功 的 时 候 才 这 么 做 ; 换言之 ,我 们 只 想 在 Deferred 
状态 变 为 flfilled 的 时 候 才 如 此 执行 。 

那 怎 么 知道 peferred 何 时 会 变 为 fnlfilled 呢 ? addSsubmitHandtLer 的 函数 实 参 会 返回 一 个 
Deferred， 你 可 以 在 addSsubmitHandtLer 内 部 的 Deferred 后 添加 一 个 .then。 

在 main.js 中 的 回调 冰 数 中 添加 return 关 键 字 。 























formHandler.addSubmitHandler(function (data) { 
return myTruck.createOrder.call (myTruck, data) 
.then(function () { 
checkList.addRow.call(checkList, data); 


}); 
}); 


保存 main.js， 然 后 打开 formhandlerjs， 找 到 addSubmitHandtLer 方 法 ， 定 位 到 相应 的 匿名 函 
数 fn。 因 为 现在 匿名 函数 会 返回 一 个 Deferred， 所 以 可 以 在 其 后 添加 一 个 .then。 使 用 .then 注 
册 一 个 回调 函数 用 于 重 置 表单 并 聚焦 到 第 一 个 元 素 。 











FormHandler.prototype.addSubmitHandler = function (fn) { 
console.log('Setting submit handler for form'); 
this.s$formElement.on('submit', function (event) { 

event.preventDefault(); 


var data = {}; 
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$(this).serializeArray().forEach(function (item) { 
data[item.name] = item.value; 
console.log(item.name + ' is ' + item.value); 
}); 
console.log(data); 
fn(data)s; 
.then(function () { 
this. reset(); 
this.elements[0].focus(); 
}); 
}); 
}; 





之 前 , 我 们 有 三 个 顺序 语句 : 执行 回调 、 重 置 表单 ， 聚 焦 到 第 一 个 元 素 。 现 在 , 我们 的 语句 
会 依赖 于 前 一 个 语句 的 返回 结果 。 我 们 执行 了 回调 ,， 则 当 且 仅 当 执行 正常 且 没 有 任何 异常 时 , 才 
会 继续 重 置 表单 并 有 旦 聚 焦 到 第 一 个 函数 。 

这 时 候 还 有 一 个 小 问题 。 当 使 用 .then 注 册 回调 函数 时 ， 它 会 有 一 个 新 的 作用 域 ， 因 此 需要 
在 匿名 函数 上 使 用 ,bind 为 FormHandLer 实 例 设置 它 的 this 的 值 。 

修改 一 下 formhandler.js。 











FormHandler.prototype.addSubmitHandler = function (fn) { 


fn(data) 
.then(function () { 
this.reset(); 
this.elements[0].focus(); 
}.bind(this)); 
}); 
}; 
保存 formhandler.js。 
同样 ， 我 们 也 只 希望 在 Truck.prototype.deliver0Order 成 功 时 才 从 清单 中 删除 选项 。 


因此 在 checklistjs 中 的 addCLickHandtLer 后 添加 ,then。 记 住 ， 要 通过 ,bind 为 匿名 函数 绑 定 
this 的 值 。 











CheckList.prototype.addClickHandler = function (fn) { 


this.s$element.on('click', 'input', function (event) { 
var email = event.target.value; 
pi Rewt i1); 
fn(email)s; 


.then(function () { 
this.removeRow(email); 
}.bind(this)); 
}.bind(this)); 
}; 
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保存 checklist.js。 回 想 一 下 ， 我 们 是 在 main.js 中 调用 addClickHandler 的 : 

checkList.addClickHandler(myTruck.deliverOrder.bind(myTruck); 

不 需要 对 这 个 方法 进行 改动 , 因为 Truck.prototype.deliver0Order 会 自动 返回 Deferred,， 
addCLickHandter 会 如 它 所 写 的 那样 工作 。 

为 数据 都 是 远程 的 ， 所 以 需要 加 载 数据 并 为 每 个 咖啡 订单 绘制 清单 。 可 以 使 用 
Truck.prototype.print0rders 和 CheckList.prototype.addRow 来 达成 这 个 目标 。 

需要 修改 print0rders 的 两 个 地 方 。 首 先 ， 要 将 print0rders 更 新 为 可 以 使 用 Deferred; 
接着 ,为 其 添加 一 个 函数 实 参 ， 用 于 遍历 需要 打印 的 数据 。 

在 truck.js 中 的 Truck.prototype.printorders 目 前 看 起 来 是 这 样 的 : 














Truck.prototype.printorders = function () { 
var customerIdArray = Object.keys(this.db.getAll()); 


console.log('Truck #' + this.truckId + ' has pending orders:'); 

customerIdArray.forEach(function (id) { 
console.log(this.db.get(id)); 

}.bind(this)); 

}; 





将 代码 更 新 一 下 , 返回 this.db.getALL， 然 后 在 其 后 调用 .then。 在 .then 中 传人 一 个 匿名 
函数 ， 并 且 用 .bind 进 行 this 绑 定 。 





Truck.prototype.printorders = function () { 
return this.db.getAll() 
.then(function (orders) { 
var customerIdArray = Object.keys(this.db.getAll()); 


console.log('Truck #' + this.truckId + ' has pending orders:'); 
customerIdArray.forEach(function (id) { 
console.log(this.db.get(id)); 
}.bind(this)); 
}.bind(this)); 
}; 











我 们 的 匿名 函数 期 望 接受 包含 服务 器 返回 的 所 有 咖啡 订单 信息 的 对 象 。 抽取 对 象 中 的 所 有 键 
名 ， 并 且 将 它们 分 配给 变量 customerIdArray。 




















Truck.prototype.printorders = function () { 
return this,db.getALL() 
.then(function (orders) { 


var customerIdArray = Object.keys (this.db.getAtLtO}; orders); 


console.log('Truck #' + this.truckId + ' has pending orders:'); 
customerIdArray.forEach(function (id) { 
console.log(this.db.get(id)); 
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}.bind(this)); 
}.bind(this)); 
}; 





同样 , 改变 console .10g 语 句 ， 让 它 不 再 调用 this .db.get(id), 而 是 使 用 包含 所 有 咖啡 订 
单 信息 的 orders 对 象 。 我 们 不 应 该 在 打印 每 个 订单 的 时 候 都 进行 Ajax 请 求 。 





Truck.prototype.printOrders = function () { 
return this.db.getALL() 
.then(function (orders) { 
var customerIdArray = 0bject.keys(orders ) ; 


console.log('Truck #' + this.truckId + ' has pending orders:'); 
customerIdArray.forEach(function (id) { 
console.log(this.db.get(id)}); orders[id]); 
}.bind(this)); 
}.bind(this)); 
}; 





printOrders 应 该 接受 一 个 可 选 的 函数 实 参 ， 所 以 我 们 需要 判断 到 底 是 否 有 函数 被 传人 。 如 
果 有 ， 则 执行 。 在 执行 的 时 候 ， 传 人 目前 的 所 有 订单 orders[id] 。 


Truck.prototype.printorders = function (printFn) { 
return this.db.getAll() 
.then(function (orders) { 
var customerIdArray = 0bject.keys(orders ) ; 


console.log('Truck #' + this.truckId + ' has pending orders:'); 

customerIdArray.forEach(function (id) { 
console.log(orders[id]); 
if (printFn) { 

printFn(orders[id]); 

} 

}.bind(this)); 

}.bind(this)); 
}; 


保存 truckjs。 在 main.js 中 执行 print0rders， 然 后 传人 checkList.addRow。 记 住 ， 要 确保 
addRow 绑 定 在 CheckList 的 实例 上 。 


formHandler.addInputHandler(Validation.isCompanyEmail); 


myTruck.printOrders(checkList.addRow.bind(checkList)); 
}) (window); 
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保存 ， 然 后 回 到 浏览 器 ，CoffeeRun 应 该 会 展示 出 清单 里 存在 的 咖啡 订单 。 手 动 刷新 页 面 来 
确认 清单 是 否 每 次 都 被 重新 填充 ， 查 看 网 络 面板 来 确认 Ajax 请 求 是 否 发 生 〈 如 图 14-5 所 示 )。 






































四 由 四 /Mcorruwn x [2| 
€ CDiocahosta000 0 i 加 ES vv 妇 E 
[x 口 Elements Console Sources Network Timeline Profiles Resources » We 
CoffeeRun 大 人 加 |View 三 过 | 国 Preservelog 团 Disablecache | No throttling v 
Coffee Order [Fikter ] Hide data URLs 
| | | xHr Js css Img Media Font Doc WS Manifest Other 
Name Status Type Initiator Size Time Timeline - Start Time 1.00s 和 
Email _] "EU=36ranspor=W... 1U1 WeD... WUTer UB rer.. 
dr@who.com _| ?EIO=38&transport=p... 200 xhr browser-s... 255B 2ms 1 
_ |_| ?EIO=38transport=p... 200 xhr browser-s... 212B 89ms 
So coffeeorders 200 xhr iquery.js:8... 1.0KB 7ms [| 
© Tall es 
Gas 18 requests | 98.5KB transferred | Finish: 285ms | DOMContentLoaded: 253ms | Load: 253ms 
Flavor Shot Console x 
None s Oiop Preserve log 
Setting input handler for form formhandler. js:39 
Caffeine Rating remotedatastore. js:24 
me, ms mm es Object {daryl@bignerdranch.com: Object, rick@bignerdranch.com: Object, 
michonne@bignerdranch.com: Object, carl@bignerdranch.com: Object} 
Submit Reset Truck #ncc-1701 has pending orders: truck.js:28 
truck.js:30 
Object {_id: "56c14e32d5612595dc977994", coffee: "motor oil", emailAddress: 
"daryl@bignerdranch.com", size: "short", flavor: "".} 
本 本 truck,. js:30 
Pending Orders: » Object {_id: "56c14e32d5612595dc977995", coffee: "cawwfeee", emailAddress: 
short motor oil (darylG@bignerdranch.com) [65] "rick@bignerdranch.com", size: "grande", flavor: "caramel"..} 
he 网 truck. js:30 
nde | cawwfeee (rick@bignerdranch.com) [30 Tue Si 
Wheel cawwioen otiOblonerchant hu cam) » Object {_id: "56c14e32d5612595dc977996", coffee: "kombucha", emailAddress: 
grande almond kombucha (michonne@bignerdranch.com) [11] "michonne@bignerdranch.com", size: "grande", flavor: "almond"..} 
tall almond hot chocolate (carl@bignerdranch.com) [1] truck.is:30 
Object {_id: "56c14e32d5612595dc977997", coffee:; "hot chocolate", emailAddress: 
"carl@bignerdranch.com", size: "tall", flavor: "almond"..} 
> 





图 14-5 ”在 页 面 加 载 的 时 候 绘制 订单 


14.6 为 DataStore 配置 Promise 


通过 用 RemoteDataStore 的 方法 返回 Deferred, 你 可 以 更 灵活 地 使 用 从 服务 器 拉 取 的 数据 。 

不 过 你 会 注意 到 ，RemoteDataStore 的 方法 和 DataStore 的 方法 间 存 在 较 大 的 差异 。 如 果 切 
回 到 DataSstore， 应 用 就 不 能 正常 工作 了 。 

在 图 14-6 中 可 以 看 到 ， 使 用 常规 DataStore 实 例 化 Truck 会 抛 出 错误 ， 并 且 不 能 和 UI 正确 交 
互 。CoffeeRun 期 望 一 个 基于 Promise 的 DataStore 来 进行 工作 。 
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© (0 coerun x \E | 
€ CC | 口 localhost:3000/?coffee=the+hasselhoff&emailAddress=michael%40knightindustries.com&size=tall&flavor=&strength=30 | E 
[x D0] | Elements Console Sources Network Timeline » @2| ; Xx 
CoffeeRun ese 
© 本 top vv Preservelog 
Coffee Order 
pe > myTruck = new App.Truck('k.i.t.t. 2000', new App.DataStore()); 
Pp Truck {truckId: "k.i.t.t. 2000", db: DataStore} 
Email 
ee > myTruck.printOrders(); 
mknight@bignerdranc 
四 PUncaught TypeError: this.db.getAll(...).then is not a truck,js:25 
Short function(..) 
© Tall coffee is the hassellhoff formhandler. is:26 
Sr emailAddress is mknight@bignerdranch.com formhandler, js:26 
eben size is tall formhandler.is:26 
me flavor is formhandler, js:26 
Cate fling strength is 30 formhandler.is:26 


EE 


formhandler.is:28 


Reset Object {coffee: "the hassellhoff", emailAddress: 
"mknight@bignerdranch.com", size: "tall", flavor: "", strength: "38" 
Adding order for mknight@bignerdranch. com truck, js:13 
Pending Orders: 四 Pp Uncaught TypeError: Cannot read property 'then' of main,.is:28 
undefined 
> 

















图 14-6 ”DataStore 不 再 兼容 


要 补救 这 种 状况 ， 需 要 修改 DataStore 的 4 个 方法 ， 让 它们 返回 Promise。 
我 们 已 经 使 用 过 jQuery 的 Deffered 对 象 ， 然 而 因为 Datastore 并 没有 使 用 jQuery 的 $.ajax 
方法 ， 所 以 需要 使 用 原生 的 Promise 构 造 函 数 来 创建 并 返回 Promise。 


14.6.1 创建 并 返回 Promise 


在 datastore.js 中 先 更 新 add 方 法 .首先 ,创建 一 个 Promise 变 量 , 然后 赋予 它 window.Promise。 
尽管 这 不 是 必须 的 ， 但 将 全 局 空间 里 所 需 的 部 分 引入 到 我 们 自己 的 模块 中 是 一 个 挺 好 的 做 法 。 
在 add 方 法 中 创建 一 个 promise 变 量 ， 并 分 配 一 个 Promise 实 例 。 确 保 在 最 后 返回 这 个 实例 。 


(function (window) { 
"use strict'; 
var App = window.App || {}; 
var Promise = window.Promise; 














function DataStore() { 
this.data = {}; 
} 


DataStore.prototype.add = function (key, val) { 
this.data[key] = val; 
var promise = new Promise(); 


return promise; 


}; 
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Promise 的 构造 函数 需要 函数 实 参 。 传 人 一 个 带 有 resolve 和 reject 两 个 形 参 的 函数 。 


DataStore.prototype.add = function (key, val) { 
this.data[key] = val; 
var promise = new Promise(function (resolve, reject) { 


}); 
return promise; 
}; 
当 Promise 运 行 的 时 候 , 它 会 执行 匿名 函数 并 传 入 两 个 值 ; resolve 和 reject。 揣 了 resolve 
消 数 会 将 Promise 的 状态 变 为 flfilled， 而 执行 reject 也 数 会 将 其 状态 变 为 rejected。 
然后 ， 将 存储 数据 的 代码 (this.data[key] = val; ) 移动 到 匿名 函数 内 。 为 了 确保 
this.data 正 确 指 代 DataSstore 的 实例 的 data 属 性 ， 在 匿名 函数 后 绑 定 this。 








DataStore.prototype.add = function (key, val) { 


var promise = new Promise(function (resolve, reject) { 
this.data[key] = val; 
}.bind(this)); 


return promise; 


}; 


14.6.2 resolve 一 个 Promise 








在 匿名 函数 的 最 后 执行 resovLe ， 不 需要 传人 实 人 参 。 





DataStore.prototype.add = function (key, val) { 
var promise = new Promise(function (resolve, reject) { 
this.data[key] = val; 
resolve(null); 
}.bind(this)); 


return promise; 


}; 


为 什么 使 用 null 作 为 实 参 呢 ?” 往 DataStore 添 加 值 并 不 会 产生 一 个 值 ， 所 以 不 需要 返回 数 
值 。 当 不 需要 返回 数值 时 , 应 该 使 用 nuLL 明 确 表 示 。( 也 可 以 使 用 resolve (val) 让 接 下 来 的 函数 
可 以 获取 最 新 存储 的 数值 ， 但 这 对 于 CoffeeRun 没 有 必要 ， 因 此 在 本 例 中 就 不 引入 了 。 ) 














14.6.3 将 其 他 DataStore 方 法 Promise 化 


























可 以 手动 更 新 其 余 3 个 方法 为 相同 的 模式 。 但 是 相 比 于 重 这 


业 


写 这 些 代码 ， 创 建 一 个 名 为 
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promiseResolvedwith 的 辅助 函数 来 生成 一 个 Promise 似 乎 更 方便 ,可 以 使 用 这 个 辅助 函数 更 新 
DataStore.prototype.add。 


function DataStore() { 
this.data = {}; 
} 


function promiseResolvedWith(value) { 
var promise = new Promise(function (resolve, reject) { 
resolve(value); 
}); 
return promise; 


} 


DataStore.prototype.add = function (key, val) { 
0 p ise(f ( 1 ) 
this.data[key] = val; 
resetve(nutl) 
} bind (this})); 


return promise; 
return promiseResolvedWith (null); 


}; 




















promiseResolvedwith 是 我 们 编写 add 方 法 时 所 使 用 的 Promise 代 码 的 可 复 用 结构 。 它 接受 
一 个 名 为 value 的 参数 ， 然 后 创建 一 个 名 为 promise 的 变量 ， 并 且 分 配 一 个 Promise 实 例 。 它 将 
一 个 带 有 resolve 和 reject 两 个 形 参 的 匿名 函数 传人 Promise 的 构造 子 数 里 。 在 匿名 函数 内 , 执 
行 resolve 并 将 value 值 传人 。 

不 需要 在 promiseResotLvedWith 中 将 函数 实 参 的 this 进 行 绑 定 ， 因 为 在 其 内 部 并 没有 引用 
到 this。 

将 其 余 方 法 更 新 为 使 用 promiseResotvedwith。 在 get 和 getALL 中 将 先前 版 本 的 值 传 人 ， 
而 在 remove 方法 中 传人 nutLtL。 
































DataStore.prototype.get = function (key) { 
return this.datafkey}; 


return promiseResolvedWith(this.data[key]); 
}; 
DataStore.prototype.getAll = function () { 


return promiseResolvedWith(this.data); 


}; 


DataStore.prototype.remove = function (key) { 
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delete this.data[lkey]; 
return promiseResolvedWith (null); 
}; 


最 后 ， 更 新 main.js， 用 DataStore 替 代 RemoteDataStore。 





var remoteDS = new RemoteDataStore(SERVER URL); 
var myTruck = new Truck('ncc-1701',—remeteDS}; new DataStore()); 
window.myTruck = myTruck; 


完成 上 述 更 改 后 ， 保 存 代 码 ， 再 次 测试 一 下 CoffeeRun。 你 会 看 到 它 使 用 DataStore 正 常 运 
行 ， 并 且 不 会 发 出 任何 Ajax 请 求 。( 如 图 14-7 所 示 ) 














© /Mcorerun x 上 [二 | 
€ GC | localhost:3000/ = 
[x 中 Elements Console Sources Network Timeline » ; Xx 
CoffeeRun 大昌 四 了 | View: 三 二 Preserve log 国 Disable cache ，Nothrottlinc 
Coffee Order Filter Regex 癌 Hide data URLs 
加  xhR Js css Img Media Font Doc WS Manifest Other 
Email 
td Recording network activity... 
Short Perform a request or hit 8 R to record the reload. 
© Tall 
Grande 
Fevor Shot Console x 
Mee 了 人 @@ 可 top Preserve log 
Caffeine Rating Adding order for george.t.stagg@bignerdranch.com truck. js:13 
Dy coffee is highland blend formhandler. js:26 
emailAddress is basil.hayden@bignerdranch.com formhandler. js:26 
Submit Reset size is short formhandler. js:26 
flavor is formhandler. js:26 
strength is 54 formhandler. js:26 
formhandler. js:28 
Pending Orders: Object {coffee: "highland blend", emailAddress: 
"basil.hayden@bignerdranch.com", size: "short", flavor: "", strength: 
_ grande light roast (colonel.taylor@bignerdranch.com) [65] "54"} 
tall black coffee (george.t.stagg@bignerdranch.com) [38] Adding order for basil.hayden@bignerdranch. com truck.js:13 
short highland blend (basil.hayden@bignerdranch.com) [54] Delivering order for elmer.t.lee@bignerdranch. com truck. js:18 


图 14-7 完成 CoffeeRun 


CoffeeRun 已 经 陪伴 了 你 一 段 时 光 。 在 这 段 日 子 里 , 你 使 用 IIFE、 回 调 函 数 和 Promise 编 写 了 
一 些 严 格 的 JavaScript 代 码 , 也 使 用 jQuery 操作 了 DOM 元 素 , 并 与 RESTful Web 服 务 器 进行 了 交互 。 

所 以 是 时 候 放 下 CoffeeRun， 踏 出 下 一 步 了 。 下 一 个 应 用 一 一 Chattrbox 是 一 个 全 栈 聊 天 
应 用 。 你 在 编写 前 端 代码 的 同时 还 要 编写 服务 器 。 不 要 因为 这 是 你 的 第 一 个 服务 器 应 用 而 感到 过 
分 焦虑 ， 你 仍然 会 使 用 JavaScript， 只 是 不 在 浏览 器 中 而 已 。 让 我 们 准备 好 来 使 用 Node.js 吧 。 
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14.7 ”中 级 挑战 : 回 退 到 Datastore 了 


如 果 你 足够 幸运 ， 你 总 是 会 有 靠 谱 的 网 络 。 但 是 你 要 做 好 在 使 用 CoffeseRun 的 时 候 网 络 中 断 
的 准备 。 

更 新 CoffeeRun， 让 它 能 在 Ajax 请 求 失败 的 时 候 使 用 DataStore。 

要 检测 代码 是 否 正 常 运行 ， 在 加 载 和 保存 咖啡 订单 的 时 候 关 闭 电脑 网 络 。 




















AS 一 立 r AN 
|= / 


实时 数据 传输 


Node.js 入 门 











Nodejs 是 一 个 开源 项 目 ， 能 够 让 JavaScript 代 码 在 浏览 器 之 外 运行 。 
浏览 器 端的 JavaScript 代 码 可 以 访问 document 和 window 这 样 的 全 局 对 象 以 及 其 他 API 和 库 函 
数 ; Node 环 境 下 的 JavaScript 代 码 则 能 够 访问 硬盘 驱动 器 、 数 据 库 和 网 络 (如 图 1$-1 所 示 )。 
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图 15-1 在 浏览 器 里 运行 的 JavaScript 与 通过 Node 运 行 的 JavaScript 


使 用 Node 能 够 创建 各 种 应 用 ， 下 至 命令 行 工具 ， 上 至 Web 服 务 需 。 接 下 来 的 4 章 会 用 Node 创 
建 名 为 Chattrbox 的 实时 聊天 应 用 ( 如 图 15-2 所 示 )。 

Chattrbox 由 两 部 分 组 成 : Node.js 服 务 器 和 浏览 器 端的 JavaScript 应 用 。 浏 览 器 会 连接 到 Node 
服务 器 ， 获 取 HTML、CSS 和 JavaScript 文 件 。 随 后 ，JavaScript 应 用 便 会 通过 WebSocket 处 理 实时 
通信 。 整 个 流程 如 图 15-3 所 示 。 
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OO ，D chattbox x | [chattrbox 


€ SC [0 localhost:3000 
Chattrbox Chattrbox 


caquino@bignerdranch.com 2 minutes ago caquino@bignerdranch.com 3 minutes ago 
Are you employed, sir? 汪 文 冯 Are you employed, sir? 
Be ya 


_ tgandee@bignerdranch.com 2 minutes ago tgandee@bignerdranch.com 3 minutes ago F 15 
8 Employed? Employed? 六 y 


caquino@bignerdranch.com 2 minutes ago caquino@bignerdranch.com 3 minutes ago 
You don't go out looking for a job dressed like that? On a weekday? 下 4 You don't go out looking for a job dressed like that? On a weekday? 
BA ya 


tgandee@bignerdranch.com 2 minutes ago tgandee@bignerdranch.com 2 minutes ago 


8 宣 ls thls a... what day is this? Isthis a.. what day isthis? OC 1 y 
caquino@bignerdranch.com 2 minutes ago caquino@bignerdranch.com 2 minutes ago 
Well, | do work sir so If you dontmind 下 1 Well, | do work sir so if you don't mind... 
ye# > 


tgandee@bignerdranch.com 2 minutes ago tgandee@bignerdranch.com 2 minutes ago 二 
了 1do mind, the Dude minds, This will not stand, ya know, this aggression wil not stand, man . 1domind the Dude minds This wilnotstand,ya know this aggression will not stand, man， 碟 y 














三 区 CC DD localhost:3000 Ea 


Gol Gol 





图 15-2 Chattrbox: 完全 可 用 于 重要 会 话 的 应 用 





WebSocket 数 据 


学 测 览 器 打 
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HTML.CSS. JavaScript 
HTML. CSS. JavaScript 
\ 浏览 器 把 
Ww 
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区 
SY - 
所 2 
喜 Se 


WebSocket 数 据 


图 15-3 ”Chattrbox 应 用 的 网 络 示 意图 
下 一 章 会 详细 介绍 WebSocket， 本 章 的 主要 任务 是 熟悉 Node。 
15.1 Node 和 npm 


因为 第 1 章 中 已 安装 好 Node.js， 所 以 现在 可 以 直接 使 用 node 和 npm 这 两 个 命令 行程 序 。npm 
可 用 于 安装 开源 工具 ， 如 browser-sync; 而 node 则 负责 运行 JavaScript 程 序 。 
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本 章 中 的 大 部 分 工作 都 要 用 到 npm。npm 命 令 行 工具 能 执行 各 种 任务 ， 如 安装 项 目 依赖 、 管 
理 项 目 工作 流 和 外 部 依赖 。 本 章 将 会 使 用 npm 来 完成 如 下 任务 。 
口 使 用 npm init 创 建 package.json 文 件 。 
口 使 用 npm install --save 添 加 第 三 方 模块 。 
口 运行 保存 在 package.json 的 scripts 中 的 常用 命令 。 


除 node 和 npm 命 令 行 外 ,Node 还 有 很 多 好 用 的 模块 ， 这些 模块 提供 的 构造 函数 能 够 访问 文件 
和 文件 夹 、 进 行 网 络 通信 、 处 理事 件 等 。 此 外 ， 在 Node 中 运行 的 JavaScript 代 码 还 能 访问 一 些 公 
用 水 数 ， 这 些 函 数 增强 了 JavaScript 与 Node 模 块 生态 系统 之 间 的 交互 。 举 个 例子 ，Node 提 供 了 比 
CoffeeRun 中 的 IIFE 更 简单 的 模块 模式 。 

上 面 提 到 的 package.json 文 件 相当 于 Node 项 目的 配置 文件 ， 它 包含 项 目 名 称 、 版 本 号 、 描 述 
等 信息 。 更 重要 的 是 ， 它 还 能 存储 测试 和 应 用 构建 时 用 到 的 配置 和 命令 。 

可 以 手动 创建 该 文件 ， 但 用 npm 自 动 生成 会 更 加 方便 。 














15.1.1 npm init 


在 项 目 文件 夹 下 创建 chattrbox 目 录 。 打 开 终 端 进 入 该 目录 ， 运 行 npm init 创 建 packagejson。 
npm 会 询问 项 目 相关 信息 ， 同 时 也 会 提供 默认 值 。 目 前 使 用 默认 值 就 够 了 ， 按 回 车 键 确认 即 
可 (如 图 15-4 所 示 )。 


和 同和 ll chattrbox 一 bash 一 80x39 

$ npm init 

This utility will walk you through creating a package.json file. 

It only covers the most common items, and tries to guess sensible defaults. 











See ‘npm help json” for definitive documentation on these fields 
and exactly what they do. 


Use ‘npm install <pkg> --save" afterwards to install a package and 
save it as a dependency in the package.json file. 


Press ^C at any time to quit. 
name: (chattrbox) 

version: (1.9.9) 
description: 

entry point: (index.js) 

test command: 

git repository: 

keywords: 

author: 

license: (ISC) 

About to write to /Users/chrisaquino/Projects/chattrbox/package.json: 


{ 

"name": "chattrbox", 

"version": "1.0.0", 

"description": "", 

"main": "index.js", 

"scripts": 

“test":; "echo \"Error: no test specified\" && exit 1" 

}, 
"author”: "", 
"license": "ISC" 


} 


Is this ok? (yes) 
s 


图 15-4 运行 npm init 
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用 Atom 打 开 项 目 文 件 夹 ， 可 以 看 到 package.json 文 件 已 经 创建 好 了 。 


v t packagejson 


_] package.json - /Users/chrisaquino/Projects/chattrbox - Atom 





国 packagejson 


图 15-5 ”执行 npm init 之 后 生成 的 package.json 内 容 


15.1.2 npm 脚 本 
在 package.json 中 有 一 个 "scripts" 字 段 , 该 字段 用 于 存储 开发 过 程 中 可 能 会 多 次 用 到 的 


构建 Chattrbox 时 ， 可 以 在 package.json 的 "scripts" 字 段 添 加 命令 ， 以 提高 开发 效率 。 首 先 ， 
添加 一 个 "start" 脚 本 ， 这 是 我 们 创建 的 第 一 个 apm 工 作 流 脚本 ( 别 忘 了 在 "test" 一 行 的 末尾 添 


加 一 个 逗号 ): 





命令 


"scripts": { 
"test": "echo \"Error: no test specified\" && exit 1", 
"start": "node index.js" 


}, 


添加 好 上 面 的 脚本 命令 后 ， 在 命令 行 运 行 npm start 即 可 启动 Node 服 务 。 





15.2 Hello, World 


为 了 解释 运行 于 浏览 絮 之 外 的 JavaScript， 首 先 来 写 一 个 经 典 的 “Hello, World” 程 序 。 在 
chattrbox 文 件 夹 里 新 建 index.js 文 件 并 输入 以 下 代码 ， 稍 后 会 对 代码 进行 解释 。 


var http = require('http'); 





var server = http.createServer(function (req, res) { 
consoLe.Log('Responding to a request.'); 
res.end('<hl>Hello, World</h1>'); 

}); 


server .Listen(3000) ; 


第 一 行 代码 使 用 Node 内 置 的 require 函 数 访问 Node 中 的 http 模 块 ， 该 模块 提供 了 很 多 用 来 
处 理 HTTP 请 求 和 响应 的 工具 ， 如 http,createServer 函 数 。 
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http.createServer 接 受 一 个 函数 作为 唯一 的 参数 ， 每 次 HTTP 请 求 时 都 会 调用 该 函数 (人 参 
数 )。 这 种 方式 很 像 浏 览 需 中 的 事件 回调 模式 ， 只 不 过 它 是 服务 器 端 事件 〈 接受 一 个 HTTP 请 求 ) 
触发 的 回调 。 

回调 函数 在 控制 台 打 印 了 一 条 消息 ,并 在 响应 中 写 人 一 些 HTML 浆 ,在 Node 中 通常 使 用 req 
和 res 作 为 HTTP 请 求 和 响应 对 象 的 变量 名 。 

最 后 ， 使 用 server.Listen 让 服务 器 监听 3000 端 口 ， 这 一 过 程 通常 叫 作 “端口 绑 定 ”。 

保存 文件 。 运 行 命令 npm start 验 证 Node 服 务 器 的 效果 ， 终端 结 果 如 图 15-6 所 示 。 














@Oee chattrbox — node — 80x7 





$ npm start 


> chattrbox@1.8.0 start /Users/chrisaquino/Projects/chattrbox 
> node index.js 








图 15-6 ”通过 npm start 运 行 index.js 

















接着 打开 浏览 器 ， 输 入 http://localhost:3000， 结果 如 图 15-7 所 示 。( 注意 ， 在 Chrome 之 外 的 某 
些 浏 览 器 中 可 能 会 看 到 纯 文本 的 HTML。 这 些 浏览 器 可 能 需要 一 个 doctype， 或 者 需要 从 响应 中 
读 取 额外 的 元 数据 ， 才 能 将 响应 当 作 HTML 和 解析 。 你 将 要 在 本 章 末尾 的 挑战 中 解决 这 一 问题 。) 


© Se@ [ localhost:3000 x 








© C © localhost:3000 
民 吕 Elements Console Sources Network Timeline » 2 


Hello， World © 是 top v OD Preservelog 


>| 











图 15-7 “在 浏览 器 中 访问 Node 服 务 器 


和 Ottergram 和 CoffeeRun 不 同 的 是 ， 在 浏览 需 端 并 不 会 看 到 JavaScript。 看 到 这 个 页 面 时 ， 服 


务 端 JavaScript 代 码 已 完成 所 有 任务 。 
回 到 终端 。 可 以 看 到 ， 收 到 请 求 时 ，console.10g 函 数 打 印 出 了 J 了 Responding to a 


request ( 如 图 15-8 所 示 )。 


Oe@e | chattrbox 一 node 一 80x7 








$ npm start 


> chattrbox@1.8.8 start /Users/chrisaquino/Projects/chattrbox 
> node index.js 


Responding to a request. 


图 15-8 ”请 求 到 达 时 console.1og 
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15.3 添加 一 个 npm 脚本 


除 编 写 命令 行 JavaScript 程 序 之 外 ，Node 还 提供 了 在 开发 过 程 中 组 织 工作 流 的 方法 一 一 一 定 
要 好 好 利用 这 一 强大 功能 。 接 下 来 往 项 目 里 增加 一 些 自动 化 的 东西 ， 看 看 它 是 如 何 工 作 的 。 
以 运行 服务 器 来 举例 。 在 每 次 修改 代码 时 ， 你 都 要 重复 以 下 操作 。 
D 在 编辑 器 里 修改 代码 。 
口 切换 到 终端 。 
口 按 Control + C 停 止 程序 。 
口 运行 npm _ start 再 次 启动 程序 。 


可 以 通过 编程 的 方式 实现 自动 重启 服务 。 幸 和 运 的 是 , 已 经 有 人 替 我 们 写 好 了 程序 ,这 是 一 个 
名 为 nodemon 的 模块 。 尽 早 在 工作 流 里 加 入 nodemon 可 以 让 编程 体验 更 加 流畅 。 

在 终端 停止 程序 并 运行 以 下 命令 来 安装 nodemon 模 块 : 

npm install --save-dev nodemon 

接着 会 出 现 如 下 几 行 提示 ,， 这 是 npm 在 提示 package.json 文 件 里 有 一 些 空 字段 。 不 必 惊 慌 ， 明 
白 nppm 对 细 市 十 分 严格 就 好 。 


npm WARN chattrbox@1.0.0 No description 
npm WARN chattrbox@1.0.0 No repository field. 


留意 npm install 里 的 - -save-dev 选 项 。 该 选项 告诉 9ppm 维 护 一 份 列表 ,记录 应 用 依赖 的 所 
有 第 三 方 模块 。 这 个 列表 存储 在 package.json 文 件 中 。 如 有 必要 ， 运 行 npm install 命 令 (不 带 参 
数 ) 即 可 安装 列表 里 的 全 部 依赖 。 如 此 一 来 ， 共 享 代码 时 就 不 必 包 含 第 三 方 模块 了 。 

打开 package.json 文 件 , 可 以 看 到 npm 创 建 了 "devDependencies" 字 段 , 其 中 有 一 条 nodemon 
相关 信息 。 














































































































"author": "" 
"license": "ISC", 
"devDependencies": { 
"nodemon": "~^1.9.1" 
} 


更 新 package.json， 向 "scripts "字段 中 添加 一 条 新 的 命令 





"scripts": { 
"test": "echo \"Error: no test specified\" && exit 1", 
"start": "node index.js", 
"dev": "nodemon index.js" 


}, 




















在 终端 运行 npm run dev， 重 启 node 程 序 。 注 意 ， 现 在 这 条 命令 不 是 简单 的 npm dev 了 , 它 
和 npm start 有 所 不 同 因为 npm 会 假定 这 种 命令 ( 比如 start ) 一 定 存 在 ， 而 自 定义 的 npm 








A 
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脚本 则 需要 显 式 地 强调 你 想 要 run 这 些 脚 本 。 
接 下 来 你 会 看 到 nodemon 已 经 在 管理 node 程 序 了 (如 图 15-9 所 示 )。 





chattrbox 一 node 一 80x8 





> chattrboxe1.9.9 dev /Users/chrisaquino/Projects/chattrbox 


> nodemon index.js 


18 Sep 11:02:01 - [nodemon] 
18 Sep 11:02:01 - [nodemon] 
18 Sep 11:02:01 - [nodemon] 


18 Sep 11:02:01 [nodemon] 





v1.5.1 
to restart at any time, enter ‘rs. 
watching: 本 .水 


starting ‘node index.js` 


图 15-9 通过 npm run dev 运 行程 序 


在 index.js 中 将 “Hello, World” 修 改 为 “Hello, World!!”， 保 存 修改 。nodemon 会 发 现 并 自动 





重启 node 程 序 ( 如 图 15-10 所 示 )。 











Oe@e ‘chattrbox 一 node 一 80x8 

18 Sep 11:02:01 - [nodemon] v1.5.1 

18 Sep 11:02:01 - [nodemon] to restart at any time, enter “rs 
18 Sep 11:02:01 - [nodemon] watching: 本 .本 

18 Sep 11:02:01 - [nodemon] starting ‘node index.js` 

18 Sep 11:03:09 - [nodemon] restarting due to changes... 

下 Sep 11:03:09 - [nodemon] starting “node index.js` 


图 1$-10 ”代码 改变 时 ，nodemon 重 启程 序 
在 接 下 来 的 几 章 继续 使 用 node 和 npm 的 过 程 中 ， 会 不 时 引进 新 模块 帮助 我 们 完成 任务 。 


15.4 用 文件 提供 服务 


在 服务 器 端 编写 和 运行 JavaScript 是 一 件 很 美妙 的 事情 ,大 多 数 服务 器 还 希望 分 发 和 人 处理 文件 
内 容 。 下 一 步 就 是 让 服务 器 从 子 目 录 中 读 取 文件 , 并 将 其 通过 响应 返回 给 浏览 器 一 一 这 有 点 像 前 


几 章 的 browser-sync。 





在 chattrbox 项 目 目录 下 新 建 app 文 件 夹 ， 并 在 其 中 创建 index.html 文 件 ， 写 和 人 以 下 内 容 : 


Hello, File! 


该 文件 不 必 包 含 实 际 的 HTML， 只 要 写 点 能 被 读 取 的 内 容 即 可 。 现 在 的 项 目 目 录 看 起 来 如 


15-11 所 示 。 
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@e@e 国 chattrbox 
FE 5 items, 298.22 GB available 
Name 和 Kind 
v Ml app Folder 
® index.html HTML text 
5 index.js JavaScript 
» Ml node_modules Folder 
| package.json JSON 


图 15-11 ”Chattrbox 项 目 结构 


15.4.1 用 fs 模块 读 取 文件 
在 index.js 中 引入 Node.js 文 件 系 统 模块 fs， 调 用 fs 的 readFile 方 法 。 


var http = require('http'); 
var fs = require('fs'); 


var server = http.createServer(function (req, res) { 
console.log('Responding to a request.'); 


fs.readFile('app/index.html', function (err, data) { 
res.end(data); 
}); 
}); 
server.listen(3000); 
readFile 方 法 接受 一 个 文件 名 和 一 个 回调 函数 作为 参数 。 在 回调 函数 中 使 用 res .end 返 回 
文件 内 容 ， 而 不 再 是 返回 HTML 文 本 。 
注意 ， 回 调 函 数 会 在 接受 文件 内 容 的 同时 接受 一 个 err 参 数 。 这 是 Node.js 的 编程 惯例 ， 稍 后 
进行 讨论 。 
nodemon 会 重启 程序 , 因此 直接 打开 浏览 器 并 刷新 页 面 即 可 。 可 以 在 浏览 器 中 看 到 index.html 
文件 中 的 内 容 : 
Hello, File! 
这 是 一 个 好 的 开始 ， 但 一 个 聊天 应 用 要 提供 的 可 不 止 是 一 个 HTML 文 件 这 么 简单 一 一 这 个 
HTML 文 件 还 要 会 请 求 其 他 的 CSS 或 JavaScript 文 件 。 为 了 完成 这 些 请 求 ， 你 的 node 程 序 需 要 理解 
请 求 了 哪个 文件 ， 在 哪儿 能 找到 请 求 的 文件 。 接 下 来 就 实现 这 个 功能 。 


























15.4.2 ”处 理 请 求 URL 


首先 需要 从 请 求 对 象 中 取得 URL 路 径 。 如 果 路 径 只 是 /， 最 好 返回 index.html 文 件 。 这 个 命名 
从 Web 早 期 开始 就 是 惯例 了 。 
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此 外 ， 需 要 返回 请 求 对 象 要 求 的 文件 。 
在 index.js 中 更 新 你 的 回调 函数 ， 取 得 浏览 器 请 求 的 文件 路 径 。 


var http = require('http'); 
var fs = require('fs'); 


var server = http.createServer(function (req, res) { 
console.log('Responding to a request.'); 
var url = req.url; 


var fileName = 'index.html'; 
if (url.length > 1) { 
fileName = url.substring(1); 
} 
consoLe.Log(fiLeName) ; 
fs.readFite('app/index.htmL'， 
res.end(data); 
}); 
}); 
server.listen(3000); 


从 请 求 对 象 的 url 属 性 可 以 看 出 浏览 器 请 求 的 到 底 是 默认 页 面 (index.html ) i 
其 他 文件 ， 调 用 urL.substring(1) 去 掉 首 字符 ， 也 就 是 "。 
到 现在 为 止 ， 还 只 是 将 文件 名 打印 到 了 控制 台 


function (err, data) { 





假如 是 





还 是 别 的 文件 。 


nodemon 重 启程 序 之 后 , 在 浏览 器 访问 http:Vlocalhost:3000/woohoo 或 包括 默认 路 径 V 在 内 的 其 





他 路 径 。 终 端 结 





吉 果 如 图 15-12 所 示 。 


©@Oe@e chattrbox 一 node 一 80x24 





$ npm run dev 国 


> node-the-thingse6.0.9 dev /Users/chrisaquino/Projects/Tinkerings/class/node-th 
e-things 
> nodemon index.js 


8 Sep 17:07:58 - [nodemon] v1.4.1 

8 Sep 17:07:58 - [nodemon] to restart at any time, enter “rs° 
8 Sep 17:07:58 - [nodemon] watching: 本 .本 

8 Sep 17:07:58 - [nodemon] starting “node index.js. 

8 Sep 17:08:04 - [nodemon] restarting due to changes... 
8 Sep 17:08:04 - [nodemon] starting “node index.js. 
Responding to a request. 

woohoo 

Responding to a request. 

awwww/yeaaaaah 

Responding to a request. 

play/some/skynyrd 

Responding to a request. 

index.html 


图 15-12 ”打印 请 求 的 文件 路 径 


(还 记得 在 第 2 章 中 浏览 器 自动 请 求 favicon.ico 文 件 么 
请 求 。) 


现在 该 使 用 路 径 信息 了 


? 在 终端 也 可 以 看 到 打印 出 的 相应 
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15.4.3 ”使 用 path 模 块 


刚才 将 fileName 传 给 了 fs.readFile，, 但 最 好 使 用 path 模 块 ， 它 提供 了 可 以 处 理 和 转换 文 
一 个 简单 而 重要 的 原因 是 , 有 些 操作 系统 使 用 斜 杜 , 而 有 些 


件 路 径 的 公用 函数 。 使 用 path 模 块 的 一 


操作 系统 使 用 反 斜 杜 ，path 模 块 会 帮忙 处 理 这 些 差异 。 


修改 index.js， 
var http = require('http'); 
var fs = require('fs'); 

var path = require('path'); 


引入 path 模 块 ， 用 它 来 查找 请 求 的 文件 。 


var server = http.createServer(function (req, res) { 


console.log('Responding to a request.'); 


var url = req.url; 

var fileName = 'index.html'; 

if (url.length > 1) { 
fileName = url.substring(1); 

} 

console.log(fileName); 

var filePath = path.resoLve( 


res.end(data); 
}); 
}); 
server.listen(3000); 


在 浏览 器 里 输入 几 个 测试 的 文件 路 径 ， 确 保 程序 的 功能 


_ dirname， 


fs.readFile(:app/index-htmt'filePath, function (err, 


'app', fileName); 


data) { 





股 变 。 默 认 路 径 应 该 返 


不 存在 的 路 径 (比如 woohoo/ ) ee 





接 下 来 ， 

Hola, Node! 

在 浏览 右 中 访问 该 资源 ，node 程 序 会 
O09 chatterbox 一 node 一 80x24 


正常 





$ npm run dev 


> chatterbox@1.0.0 dev /Users/chrisaquino/Projects/front-end-dev-book/chatterbox 


> nodemon index.js 


[nodemon] 1,9， 

[nodemon] to nr estart at any tine, enter “rs 
[nodemon] watching: 

[nodemon] starting node ingew .js 
Responding to a request， 

test.html 

Responding to a request. 


Responding to a request, 


Responding to a request. 
test.html 





现在 的 代码 已 经 可 以 根据 URL 路 径 提 伐 


为 独立 模块 。 











在 app 文 件 夹 下 创建 testhtml 文 件 ， 写 人 下 面 的 内 容 : 


返回 内 容 ( 如 图 15-13 所 示 )。 





localhost:3000/test.html x 


本 C 


Hola，Nodel 


localhost:3000/test.html i 


图 15-13 取得 test html 
t 相 应 文件 了 。 下 一 步 则 是 将 该 功能 


回 index.html， 


函数 抽象 出 来 ,成 
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15.4.4 创建 自 定义 模块 


前 面 的 回调 函数 ( 至 少 ) 做 了 两 件 事 情 。 首 先 分 析出 请 求 的 文件 是 什么 ， 然 后 读 取 文件 内 容 
并 在 响应 中 返回 。 为 了 让 代码 更 加 模块 化 且 更 好 维护 ， 需 要 将 其 中 一 项 功能 挪 到 单独 的 模块 中 。 

在 CoffeeRun 里 ， 可 以 在 IFE 中 声明 模块 ，IIEFE 能 给 全 局 命名 空间 的 属性 赋值 。 但 Node 程 序 
中 的 模块 不 太一 样 。 现 在 还 是 在 单独 的 文件 中 编写 模块 代码 ， 但 是 不 需要 IIFE 了 。 

在 index.js 的 同 级 目录 (不 是 app 目 录 ) 下 新 建 extractjs 文 件 ， 添 加 一 个 extractFilePath 子 
数 用 来 查找 对 应 的 文件 。( 代码 跟 在 index.js 中 写 过 的 代码 非常 相似 。) 


var path = require('path'); 















































var extractFilePath = function (url) { 
var fiLePath 
var fileName = 'index.html'; 


if (url.length > 1) { 
fiLeName = url.substring(1); 


console.log('The fileName is: ' + fileName); 


filePath = path.resolve(_dirname, 'app', fileName); 
return fiLePath ; 
}; 
现在 indexjs 中 的 很 多 代码 都 挪 到 了 单独 的 函数 extractFilePath 中 。 接 下 来 ， 让 
extractFitLePath 函 数 能 被 其 他 模块 用 require 引 入 。 要 实现 这 一 点 ， 需 将 extractFiLePath 
赋值 给 名 为 mnodute.exports 的 全 局 变量 。 这 是 一 个 由 Node 提 供 的 特殊 变量 ， 赋 给 它 的 值 都 能 和 
其 他 模块 引入 ， 别 的 变量 和 函数 则 不 能 被 其 他 模块 访问 。 














filePath = path.resolve( dirname, 'app', fileName); 
return filePath; 


}; 
module.exports = extractFilePath; 


新 增 的 一 行 代码 告诉 Node， 当 通过 调用 require('./extract')3 引 入 extract 模 块 时 , 返回 
值 是 extractFitePath 函 数 。 下 面 就 在 index.js 中 引入 它 。 


15.4.5 ”使 用 自 定义 模块 
修改 index.js， 使 用 新 的 extract 模 块 奉 代 原 来 的 功能 代码 。 


var http = require('http'); 
var fs = require('fs'); 
var_ path = require( "path');} 


var extract = require('./extract'); 














var server = http.createServer(function (req, res) { 
console.log('Responding to a request.'); 
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var fiLePath = extract(req.urt) ; 
fs.readFile(filePath, function (err, data) { 
res.end(data); 
}); 
}); 
server.listen(3000); 
用 require 函 数 引 入 自 定义 模块 ， 并 且 将 模块 赋值 给 新 的 变量 ext ract。 然 后 ， 就 能 使 用 
extract 函 数 ( 等 价 于 使 用 extractFiLePath 函 数 ) 了 。 
待 nodemon 重 新 启动 程序 后 ， 用 一 些 URL 路 径 进行 测试 ， 确 保 默 认 的 index.html 和 test.html 还 
会 加 载 ， 还 要 确保 不 存在 的 路 径 会 返回 空白 页 并 且 不 会 报错 。 


15.5 ”错误 处 理 


现在 还 剩 最 后 一 项 任务 : 当 文件 不 存在 时 ， 最 好 返回 错误 码 ， 而 不 是 默默 地 假装 一 切 正常 。 
因此 ， 当 fs. readFile 返 回 错误 而 不 是 文件 的 时 候 ， 我 们 需要 感知 错误 。 

在 JavaScript 中 ， 经 常 将 回调 函数 传 给 API 方 法 。Node.js 也 是 如 此 ， 回 调 函 数 一 般 都 把 错误 作 
为 第 一 个 参数 。 因 为 把 错误 放 在 返回 结果 之 前 ， 所 以 不 管 是 否 处 理 它 ， 至 少 能 让 人 看 到 。 

在 index.js 中 检查 是 否 有 文件 错误 。 如 果 有 ， 则 往 响应 中 写 和 4904 错误 码 。 


var http = require('http'); 
var fs = require('fs'); 
var extract = require('./extract'); 
























































var handleError = function (err, res) { 
res.writeHead(404); 
res.end(); 


}; 


var server = http.createServer(function (req, res) { 
console.log('Responding to a request.'); 
var filePath = extract(req.url); 
fs.readFile(filePath, function (err, data) { 
if (err) { 
handleError(err, res); 
return; 
} else{ 
res.end(data); 
} 
}); 
}); 


server.listen(3000); 
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保存 修改 。nodemon 重 启 后 ， 访 问 一 个 不 存在 的 路 径 ， 比 如 http://localhost:3000/woohoo。 在 
开发 者 工具 中 打开 网 络 面板 ， 就 能 看 到 错误 码 ， 如 图 15-14 所 示 。 


[x 口 Elements Console Sources Network Timeline Profiles Resources » WE 





大昌 | View: 旺 三 Preserve log 辆 Disable cache No throttling v 


ilter Regex | Hide data URLs 
[A | XHR JS CSS Img Media Font Doc WS Manifest Other 


Name X Headers Preview Response Timing 


were <. 


Request URL: http://localhost:3000/woohoo 
Request Method: GET 

Status Code: 国 404 Not Found 

Remote Address: [::1]:3000 


TYResponse Headers view source 


Connection: keep-alive 
Date: Thu, 21 Apr 2016 21:49:19 GMT 


Transfer-Encoding: chunked 
TYRequest Headers view source 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9, imag 
e/webp,*/*;q=0.8 
Accept-Encoding: gzip, deflate, sdch 
1 requests | 120B transferr... Accept-Language: en-US,en;q=0.8 


图 15-14 ”网 络 面板 里 的 404 状 态 人 码 





在 回调 函数 中 要 做 的 第 一 件 事情 就 是 检查 err 参 数 是 否 不 为 nutL1 或 undefined， 并 且 进 行 处 
理 。 上 面 的 例子 先 把 错误 信息 传 给 函数 handLeError， 然 后 return， 就 退出 了 匿名 回调 函数 。 

永远 不 要 默默 地 丢弃 错误 。 目 前 简单 地 返回 404 就 够 了 ， 这 也 是 handLeError 的 做 法 。 

“ 先 报错 ， 早 返回 ”的 模式 是 Node 生 态 系统 的 最 佳 实践 之 一 。Node 的 所 有 模块 都 遵循 这 一 模 
式 ， 大 多 数 的 开源 模块 也 是 如 此 。 

到 目前 为 止 ， 我 们 已 经 使 用 了 熟悉 的 模式 ( 如 回调 函数 )， 通 过 十 几 行 JavaScript 代 码 构建 了 
一 个 可 以 运行 的 Web 服 务 器 。 

Node 提 供 了 大 量 与 网 络 、 文 件 交 互 的 模块 ， 如 在 本 项 目 里 用 到 的 http 和 fs。 此 外 ，Node 的 
require 和 module .exports 关 键 字 让 我 们 能 轻松 地 模块 化 自己 的 代码 。 

接 下 来 的 3 章 会 继续 构建 Chattrbox， 同 时 还 会 开发 相应 的 前 端 程序 。 




















15.6 ”延展 阅读 : npm 模块 注册 
有 大 量 可 用 的 包 能 通过 npm 安 装 。 在 专门 的 模块 注册 网 站 ， 即 www.npmjs.com 上 就 能 搜索 和 


浏览 这 些 包 。 
请 阅读 docs.npmjs.com 上 关于 npm 的 文档 。 也 许 你 还 想 自己 创建 模块 给 别人 使 用 ， 那 么 可 以 


看 一 下 docs.npmjs.com/getting-started/creating-node-modules。 
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15.7 初级 挑战 : 创建 自 定义 错误 页 面 


目前 在 访问 一 个 不 存在 的 页 面 路 径 时 ， 服 务 器 会 返回 空白 页 和 一 个 404 状 态 码 。 
那么 现在 的 挑战 是 ,创建 一 个 专门 的 错误 页 面 。 当 访问 不 存在 的 路 径 时 ， 给 用 户 展现 这 个 页 
面 ， 而 不 是 一 个 状态 码 。 


15.8 延展 阅读 : MIME 类 型 


你 是 否 想 过 为 什么 计算 机 知道 要 用 一 个 视频 播放 器 打开 一 个 电影 文件 , 用 一 个 文档 查看 器 打 
开 一 个 PDF 文 件 ? 那 是 因为 计算 机 维护 了 一 个 表格 , 用 来 保存 文件 类 型 和 与 文件 类 型 相关 联 的 程 
序 。 计 算 机 根据 文件 的 扩展 名 ( 如 .html 或 者 .pdf ) 来 推断 文件 类 型 。 

浏览 器 同样 需要 关联 信息 , 这 样 它 才 能 知道 是 将 响应 演 染 成 HTML, 还 是 使 用 插件 播放 音乐 ， 
抑或 是 将 文件 下 载 到 硬盘 上 。 但 HITP 响 应 没有 这 样 的 文件 扩展 名 ， 因 此 服务 器 必须 在 响应 里 告 
诉 浏览 器 响应 信息 的 类 型 。 

服务 器 通过 在 响应 的 Content -Type 首部 中 指定 MIME 类 型 或 者 媒体 类 型 来 实现 这 一 目标 。 举 
个 例子 ， 图 1$-15 是 在 开发 者 工具 的 网 络 面板 中 观察 到 的 www.bignerdranch.com 的 响应 。 





Content-Type: text/html 





15-15 ”观察 www.bignerdranch.com 的 Content-Type 首 部 


Content-Type 首 部 被 设置 为 text/html，, 即 HTML 的 MIME 类 型 。 你 也 可 以 在 项 目 里 设置 这 
样 的 首部 信息 。 在 Chattrbox 项 目 里 可 以 把 代码 改 成 这 样 : 
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var server = http.createServer(function (req, res) { 
console.log('Responding to a request.'); 
var fiLePath = extract(req.url); 
fs.readFile(filePath, function (err, data) { 
if (err) { 
handleError(err, res); 
return; 
} else { 
res.setHeader('Content-Type', 'text/html'); 
res.end(data); 
} 
}); 
}); 
server.listen(3000); 
(注意 ， 要 在 结束 响应 之 前 设置 首部 。) 
如 需 获 取 更 多 关于 MIME 类 型 的 信息 ， 请 访问 en.wikipedia.org/wiki/Media type。 如 需 获 取 在 
Node 程 序 里 设置 首部 的 相关 信息 ， 请 访问 nodejs.org/api/http.html#http response_setheader 
name value。 


15.9 ”中 级 挑战 :动态 提供 MIME 类 型 


请 根据 文件 类 型 ， 给 响应 动态 地 提供 MIME 类 型 。 为 了 更 方便 地 实现 这 一 功能 ， 请 用 npm 安 
装 mime 模 块 。 关 于 mime 模 块 的 信息 和 文档 可 以 在 github.comy/broofa/node-mime 上 找到 。 

往 app 文 件 夹 下 增加 不 同类 型 的 文件 ( 包括 纯 文本 、PDF、 音 频 文件 、 电 影 等 )， 确 保 浏 览 器 
能 够 正确 展示 每 种 类 型 。 


15.10 ”高 级 挑战 : 将 错误 处 理 放 到 单独 的 模块 中 


请 将 文件 读 取 和 错误 处 理 的 代码 移 到 单独 的 模块 中 。 
同时 ， 要 让 模块 可 配置 ， 这 样 就 可 以 在 引入 该 模块 时 指定 静态 HTML 、CSS 、JavaScript 文 件 
所 在 的 基础 目录 。 
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如 果 用 常规 的 GET 和 POST 请求， 每 次 与 服务 器 进行 数据 交换 时 ， 浏 览 吉 都 需要 发 起 新 的 请 求 
并 等 待 响 应 。Ajax 请 求 也 是 如 此 一 一 虽然 它 不 会 导致 页 面 重 载 , 但 是 一 样 会 产生 网 络 流量 ,生成 
和 处 理 每 个 请 求 和 响应 都 需要 产生 一 些 开 销 。 

相反 ，WebSocket 提 供 了 HTTP 之 上 的 双向 通信 协议 。 它 创建 一 个 单独 的 连接 ， 而 且 保持 连接 
打开 ， 用 来 进行 实时 通信 ( 如 图 16-1 所 示 )。 
































Ajax WebSockets 


EN EP 慑 这 运 去 二 二 后 志 二 志 区 二 本 本 而 冲 大 而 二 晤 二 站 二 记 二 疝 总 症 二 高 二 避 症 属 史记 疝 避 本 天 部 司 动 二 击 


响应 #1 
响应 #2 
响应 #3 





请 求 #1 

请 求 刀 

请 求 #3 

图 16-1 多 个 Ajax 请 求 VS 一 个 单独 的 WebSocket 连 接 

在 Web 应 用 中 使 用 WebSocket 不 仅 可 以 实现 保存 、 加 载 远 程 数据 ， 而 且 推 送 通知 、 文 档 协 作 

编辑 、 实 时 聊天 等 都 只 能 算是 入 门 级 别 的 功能 。WebSocket 使 得 服务 器 能 够 处 理 物 联网 上 承载 的 

事物 (如 智能 灯光 、 智 能 锁 、 智 能 汽车 等 )， 但 Ajax 请 求 这 种 传统 技术 处 理 起 如 此 密集 的 通信 流 
量 的 效率 极 低 。 
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we 








本 章 会 创建 一 个 聊天 应 用 的 客户 端 和 服务 器 。 假 如 使 用 Ajax 来 构建 这 个 应 用 , 必须 至 少 建 立 
两 个 连接 : 一 个 用 来 请 求 新 的 消息 ， 另 一 个 用 来 发 送 消息 。 ， 在 一 个 单独 的 连 
接 上 完成 同样 的 事情 。 

在 本 章 末 尾 ，Chattrbox 将 能 处 理 多 个 并 发 的 聊天 客户 端 ， 并 将 新 消息 发 送 到 每 个 客户 端 ( 如 
图 16-2 所 示 )。 

. [Ee € f . | é "| 
> $ wscat -Cc ws://localhost:3001 Ns wscat -c ws://localhost:3001 
connected (press CTRL+C to quit) connected (press CTRL+C to quit) 
> ahoy! 
< ahoy! 
< ahoy! > how are you? 


< how are you? 


< aye bee fine. 


< how are you? 
> aye bee fine. 


< aye bee fine。 


< i seem to have Lost me parrot. > i seem to have lost me parrot. 
> I'LL help you look! 


< i seem to have lost me parrot. 


< I'll help you look! 


> 


> nodemon 


[nodemon] 1.9.1 


[nodemon] 
[nodemon] 
[nodemon] 
websockets server 
client connection 
client connection 
received: 
received: 
received: 
received: 
received: 


message 
message 
message 
message 
message 


index.js 


< I'l\l help you look! 
> 


chatterbox 一 node 一 82x15 


to restart at any time，enter “rs. 
watching: 
starting 


本 。 林 

“node index.js. 

started 

established 

established 

ahoy! 

how are you? 

aye bee fine. 

i seem to have lost me parrot. 
I'l\ help you look! 


图 16-2 ”海盗 聊天 室 





16.1 配置 WebSocket 


为 了 在 Chattrbox 中 使 用 WebSocket， 需 要 执行 以 下 步骤 。 
(1) 安装 ws 模块 。 
(2) 创建 WebSocket 服 务 器 。 

(3) 为 服务 需 添加 聊天 功能 。 
(4) 向 新 用 户 发 送 历史 聊天 消息 。 


从 第 一 步 开 始 。 
Node.js 中 的 http 模 块 提 供 了 启动 HTTP 服 务 器 的 简单 方式 ， 方便 浏览 器 和 服务 右 进 行 通信 。 
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和 http 相 似 , 通过 WebSocket，ws 模 块 向 Nodejs 程 序 提供 了 简单 的 通信 方式 。 很 多 模块 都 实 
现 了 WebSocket， 但 是 ws 是 标准 实现 ， 性 能 很 好 。 

首先 在 Chattrbox 目 录 下 安装 WebSocket 模 块 ws。( 如 果 看 见 npm 发 出 警告 , 提示 项 目 缺失 了 描 
述 或 者 仓库 信息 ， 请 不 要 际 慌 。 ) 


npm install --save ws 


下 一 步 ， 在 Chattrbox 根 目录 下 新 建 websockets-serverjs 文 件 。 添 加 代码 引入 ws 模块 ， 开 始 监听 : 


var WebSocket = require('ws'); 
var WebSocketServer = WebSocket.Server; 
var port = 3001; 
var ws = new WebSocketServer({ 
port: port 
}); 

















console.log('websockets server started'); 


使 用 requi re 声明 导入 ws 模块 。 该 模块 包含 了 一 个 Server 属 性 , 使 用 该 属性 可 以 创建 一 个 可 
用 的 WebSocket 服 务 器 。 

这 一 功能 的 核心 代码 是 var ws = new WebSocketServer(/*...*/);。 运 行 这 段 代码 会 创 
建 WebSocket 服 务 器 ， 并 绑 定 指定 的 端口 号 (这 里 是 3001 )。 

跟 extract.js 中 的 模块 不 同 ， 这 里 不 需要 module .exports 赋 值 操 作 。 引 和 websockets-server'js 
模块 时 ， 其 中 的 代码 就 会 运行 。 该 模块 会 处 理 所 有 关于 WebSocket 的 初始 化 和 事件 处 理 。 
创建 好 WebSocket 服 务 器 之 后 的 第 一 件 事 情 就 是 处 理 连接 。 在 websockets-serverjs 中 ， 为 
WebSocket 服 务 器 中 所 有 的 连接 事件 创建 一 个 回调 函数 : 


Var WebSocket = require('ws'); 
var WebSocketServer = WebSocket.Server; 
var port = 3001; 
var ws = new WebSocketServer({ 
port: port 
}); 




































































console.log('websockets server started'); 


ws.on('connection', function (socket) { 
console.log('client connection established'); 


}); 

事件 处 理 语法 与 jQuery 类 似 ， 很 多 JavaScript 库 (包括 Node、 浏 览 器 端 ) 都 使 用 了 该 模式 。 

事件 处 理 回 调 函 数 唯一 接受 的 参数 叫 作 socket。 当 一 个 客户 端 与 WebSocket 服 务 器 建立 连接 
时 ， 就 能 通过 这 个 socket 对 象 获取 这 个 连接 。 

在 写 聊 天 应 用 的 服务 端 代码 之 前 ， 需 要 配置 服务 端 程序 ， 使 其 能 够 重复 任意 接受 到 的 消息 。 
这 种 服务 器 通常 叫做 回声 服务 器 。 

给 客户 端 连 接 上 产生 的 任意 message 事 件 注 册 一 个 回调 函数 ， 将 “回声 ”功能 添加 到 


websockets-server.js 中 。 
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console.log('websockets server started'); 


ws.on('connection', function (socket) { 
console.log('client connection estabLished ' ) ; 


socket.on('message', function (data) { 
console.log('message received: ' + data); 
socket .send(data); 


}); 


— 








和 
Ky 


各 事件 处 理 程 序 直接 注册 到 socket 对 象 上 。message 事 件 回调 函数 会 接受 客户 端 发 送 的 任何 
言 息 。 现 在 ， 聊 天 程序 只 是 在 相同 的 socket 连 接 上 将 收 到 的 信息 send 回 去 。 

马上 就 能 看 到 实际 运行 效果 。 

可 以 直接 在 命令 行 执行 node websockets-serverjs 启 动 WebSocket 服 务 器 ,但 是 把 它 放 到 index.js 
中 执行 也 不 麻烦 。 而 且 后 者 还 有 一 个 好 人 处: 不 管 对 websockets-serverjs 还 是 index.js 进 行 修改 ， 都 
可 以 利用 nodemon 自 动 重 载 代码 。 

在 index.js 顶 部 添加 一 个 require 声 明 ， 引 入 websockets-server 模 块 。 


var http = require('http'); 

var fs = require('fs'); 

var extract = require('./extract'); 

var wss = require('./websockets-server'); 


















































保存 文件 ，nodemon 会 重 载 代 码 。 一 切 就 纤 ， 只 等 检测 效果 。 





16.2 ”测试 WebSocket 服务 器 


一 个 简单 的 测试 方法 是 使 用 wscat 模 块 。wscat 工 具 可 以 用 来 连接 WebSocket 服 务 器 并 与 之 通 
信 。 该 模块 提供 了 命令 行程 序 ， 可 以 当 作 一 个 聊天 应 用 的 客户 端 。 

新 打开 一 个 终端 窗口 ， 全 局 安装 wscat。 可 能 需要 使 用 管理 员 权 限 来 执行 安装 命令 。( 可 以 
参考 第 1 章 ， 复 习 相 关 知 识 。) 
npm install -g wscat 

安装 完 wscat ， 就 可 以 连接 到 WebSocket 服 务 器 了 。 

在 第 二 个 终端 窗口 中 运行 wscat -c ws://LocatLhost:3001， 随 后 在 第 二 个 终端 窗口 就 能 
看 到 消息 connected (press CTRL+C to quit) ， 在 第 一 个 终端 窗口 则 能 看 到 'ctLient 
connection estabLished '。 

在 第 二 个 终端 窗口 的 光标 处 输入 一 些 文字 。 每 次 输 完 文字 按 下 回 车 键 ， 输 入 的 文字 都 会 被 
WebSocket 服 务 需 返回 。 如 岁 16-3 所 示 。 
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@@® chatterbox — node — 40x17 


$ npm run dev | > $ wscat -c ws://localhost:3001 





> chatterbox@1.0.0 dev /Users/chrisaquino/Projects/A connected (press CTRL+C to quit) 
ont-end-dev-book/chatterbox > hello 
> nodemon index.js 





< hello 
[nodemon] 1.9.1 > Kumusté 
[nodemon] to restart at any time, enter ‘rs. 
[nodemon] watching: 本 .水 < Kumusté 
[nodemon] starting ‘node index.js` > bonjour 
websockets server started 
client connection established < bonjour 
message received: hello > 你 好 
message received: Kumusté 
message received: bonjour < 你 好 
message received: 你 好 > 目 














16-3 ”使 用 wscat 测 试 服务 器 


现在 已 经 能 通过 WebSocket 与 服务 器 进行 通信 。 接 下 来 就 要 添加 一 些 真正 有 用 的 功能 ， 
Chattrbox 成 为 名 副 其 实 的 聊天 系统 。 


16.3 ”创建 聊天 服务 器 的 功能 


启动 WebSocket 服 务 器 之 后 ， 就 能 够 构建 聊天 服务 器 了 。 聊 天 服务 器 应 具备 以 下 功能 。 
口 记录 发 送 到 服务 需 的 所 有 消息 。 

口 向 新 加 入 聊天 室 的 用 户 广播 历史 消息 。 

口 向 所 有 客户 端 广播 新 消息 。 


将 用 户 发 送 的 消息 记录 下 来 才能 向 新 用 户 发 送 历史 消息 ， 所 以 要 先 实 现 记录 消息 的 功能 。 
在 websockets-serverjs 中 创建 一 个 数组 ， 用 来 记录 消息 。 


var WebSocket = require( ws ' ); 
var WebSocketServer = WebSocket.Server; 
var port = 3001; 
var ws = new WebSocketServer({ 
port: port 
}); 


var messages = []; 






































console.log('websockets server started'); 








如 果 要 创建 更 健壮 的 聊天 系统 , 应 该 将 消息 存储 在 数据 库 中 。 不 过 目前 用 一 个 简单 的 数组 就 
可 以 了 。 
接 下 来 ， 当 收 到 新 消息 时 ， 调 用 messages .push (data) 将 新 消息 添加 到 数组 中 。 





ws.on('connection', function (socket) { 
console.log('client connection established'); 


socket.on('message', function (data) { 
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console.log('message received: ' + data); 
messages.push (data); 
socket. send(data); 
}); 
}); 


上 面 代 码 中 的 数组 能 够 将 聊天 服务 器 收 到 的 消息 保存 起 来 。 
下 一 步 就 是 让 新 用 户 看 到 所 有 的 历史 消息 。 修 改 websockets-serverjs 中 的 连接 事件 处 理 程序 ， 
向 每 个 新 到 达 的 连接 发 送 所 有 的 历史 消息 。 




















ws.on('connection', function (socket) { 
console.log('client connection established'); 


messages.forEach(function (msg) { 
socket .send(msg); 


}); 


socket.on('message', function (data) { 
console.log('message received: ' + data); 
messages.push(data); 
socket.send(data); 
}); 
}); 


当 建 立 了 一 个 连接 之 后 ， 服 务 器 遍历 所 有 消息 ， 把 每 条 消息 发 送 给 新 的 连接 。 
最 后 一 项 任务 是 : 当 接 受到 新 消息 时 ， 将 新 消息 发 送 给 所 有 用 户 。WebSocket 记 录 了 所 有 已 
连接 用 户 。 在 websockets-serverjs 中 使 用 这 一 机 制 ， 将 收 到 的 消息 再 次 广播 。 



































ws.on('connection', function (socket) { 
console.log('client connection established'); 


messages.forEach(function (msg) { 
socket. send(msg); 


}); 


socket.on('message', function (data) { 
console.log('message received: ' + data); 
messages.push(data); 
ws.clients.forEach(function (clientSocket) { 
clientSocket. send(data); 


}); 








ws 对 象 用 cLients 属 性 记录 了 所 有 的 连接 。 该 属性 是 一 个 数组 ， 可 以 对 其 进行 迭代 。 在 迭代 
的 回调 函数 中 ， 只 需要 send 消 息 数据 。 

最 后 ,因为 在 迭代 所 有 的 socket 连 接 时 , 已 经 将 消息 发 送 到 了 当前 的 socket 连 接 , 因此 没 必 要 
再 调用 socket .send(data) 了 。 将 其 删除 ， 免 得 重复 发 送 消息 。 
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16.4 ”第 一 次 聊天 ! 


现在 来 测试 新 功能 。 先 确保 nodemon 已 经 重新 加 载 了 代码 。( 如 有 必要 ， 可 以 按 Control + C 
手动 停止 nodemon 并 输入 npm run dev 重 启 。) 

打开 第 三 个 终端 窗口 ， 运 行 命令 wscat -c http://LocaLhost:3001。( 需要 一 个 终端 窗口 
运行 nodemon， 另 外 两 个 窗口 运行 wscat。) 在 连接 到 服务 器 的 两 个 窗口 中 输入 一 些 聊天 消息 。 

自己 跟 自 己 聊 一 会 儿 后 ， 打 开 第 四 个 终端 窗口 ， 运 行 wscat -c http://Locathost:3001。 
这 一 个 聊天 客户 端 应 该 能 收 到 所 有 的 历史 消息 。 

不 出 意外 的 话 ， 应 该 能 看 到 如 图 16-4 所 示 的 情形 。 





> chatterbox@1.0.8 dev /Users/chrisaquino/Projects/front-end-dev-book/chatterbox 
> nodemon index.js 


[nodemon] 1.9.1 

[nodemon] to restart at any time, enter ‘rs. 
[nodemon] watching: 本。 本 

[nodemon] starting ‘node index.js` 
websockets server started 

client connection established 

client connection established 

client connection established 

message received: Yo. S'up Mister White? 
message received: What's my name? 
message received: Heisenberg! 

message received: DOM Right. 

message received: tighttighttight! 


了 4 


'® © @ chatterbox — node... 





> $ wscat -c ws://localhost:30801 
connected (press CTRL+C to quitMl connected (press CTRL+C to quit) 
connected (press CTRL+C to quit) 





> Yo. S'up Mister White? < Yo. S'up Mister White? < Yo. S'up Mister White? 

| > What's my name? 

< Yo. S'up Mister White? < What's my name? 
< What's my name? > Heisenberg! 

< What's my name? 

| < Heisenberg! < Heisenberg! 

< Heisenberg! > DOM Right. 

| < DOM Right. 

< DOM Right. < DOM Right. > tighttighttight! 

< tighttighttight! < Ponetohttioht! < tighttighttight! 

> > > 





16-4 与 儿 个 朋友 聊天 


恭喜 你 ! 已 经 用 WebSocket 完 成 了 一 个 功能 齐备 的 聊天 服务 器 一 一 而 且 仅 仅 用 了 二 十 几 行 
JavaScript 代 码 。 





16.5 ”延展 阅读 : WebSocket 库 socket.io 


ws 模块 是 WebSocket 的 不 错 实现 。 但 必须 承认 ， 它 缺少 一 些 方法 。 举 个 例子 ，WebSocket 连 接 
有 时 候 会 掉 线 ， 但 是 ws 模块 没有 提供 自动 重 连 的 方法 。 

还 有 一 个 问题 ，ws 只 存在 于 Nodejs 的 世界 里 ， 只 能 在 服务 端 使 用 。 在 客户 端的 JavaScript 中 ， 
还 得 学 习 并 使 用 另 一 个 完全 不 同 的 库 ， 哪 怕 它 们 实现 的 核心 功能 一 模 一 样 。 
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另外 ,在 客户 端 还 有 











需要 一 个 降级 方案 。 


SOC 





ket .io ( socket.io ) 为 这 些 问题 提供 了 解决 办 法 





他 问题 ;假如 浏览 器 版 本 很 低 ， 不 支持 WebSocket 怎 么 办 ?因此 ， 还 











它 为 浏览 器 提供 了 向 后 兼容 的 降级 





方案 ， 包 括 一 个 Flash 的 实现 方案 。 此 外 ， 它 还 被 移植 到 了 很 多 其 他 平台 ,包括 OS 和 Android。 


16.6 


延展 阅读 : WebSocket 服务 





假如 你 对 提供 实时 平台 的 服务 感 兴 趣 ， 可 以 试 一 下 firebase ( www.firebase.com )。 如 果 说 


socket 


括 让 客户 端 共 享 和 同步 数据 的 机 


16.7 


更 新 message 事 件 处 理 程 序 ， 使 收 到 的 每 条 消息 向 每 个 用 户 发 送 两 次 。 





.io 降 低 了 编写 服务 端 代码 的 难度 ，firebase 则 更 进一步 





初级 挑战 : 我 重复 了 我 的 消息 吗 ? 








用 wscat 进 行 测试 ， 确 认 每 条 消息 都 重复 了 。 
为 了 实现 有 趣 的 效果 ， 每 次 收 到 新 消息 时 ， 增 加 一 次 重复 次 数 。 


16.8 


在 20 世 纪 20 年 代 的 美 





中 级 挑战 : Speakeasy 

















精 饮料 的 秘密 酒吧 。 这 些 酒吧 要 求 顾客 报 上 密码 ， 方 能 让 其 进入 。 
给 聊天 程序 也 创建 一 个 speakeasy 版 本 吧 (但 是 咱 不 卖 酒 )， 将 所 有 的 消息 都 隐藏 起 来 ， 直 到 




















用 户 输入 密码 。( 出 于 历史 原因 ，Swordfish 这 个 密码 不 错 。) 








国 , 酒 的 生产 和 销售 都 是 非法 的 , 于 是 人 们 创造 出 speakeasy 





它 提 供 了 一 整套 服务 ， 包 
央 。firebase 为 Web 、iOS 和 Android 等 平台 均 提 供 了 解决 方案 。 





售卖 酒 








当 用 户 输入 了 密码 ， 将 所 有 历史 消息 发 送 给 用 户 ， 并 且 人 允许 他 们 看 到 新 消息 。 


16.9 





高 级 挑战 : 聊天 机 器 人 








前 面 使 用 websocket .Server 属 性 创建 了 聊天 服务 器 。 你 也 可 以 使 用 WebSocket 作 为 构造 函 
数 ， 用 程序 创建 聊天 客户 端 。 

下 面 是 示例 代码 : 

var chatClient = new WebSocket('http://localhost:3001'); 

在 github.com/websockets/ws 上 的 文档 中 有 一 个 简单 的 例子 ， 可 以 发 送 和 接收 文本 数据 。 

创建 一 个 聊天 机 器 人 , 让 它 能 自动 连接 到 聊天 服务 器 。 它 能 跟 每 个 新 用 户 打 招呼 ， 其 他 时 候 

















保持 沉默 ， 直 到 有 用 户 直接 与 它 对 话 。 举 个 例子 ， 假 如 你 的 聊天 机 器 人 能 








向 应 Jinx 这 个 名 字 ， 那 


么 你 输入 Jinx, put Max in space 的 话 ， 聊 天 机 恬 人 就 会 根据 你 的 输入 进行 回答 。( 回答 的 内 容 取 决 


于 你 。) 





确保 聊天 机 器 人 的 代码 在 一 个 单独 的 模块 中 ， 而 不 要 将 其 直接 构建 到 聊天 服务 器 代码 中 。 





昔 助 Babel 使 用 ES6 








JavaScript 语 言 诞 生 于 1994 年 ， 在 1999 年 进行 了 一 些 更 新 , 但 是 从 1999 年 到 2009 年 就 一 直 没 有 


更 改过 。 在 2009 年 引入 了 


诞生 了 。 


一 系列 较 小 的 修改 后 ， 我 们 所 熟知 的 ES5 版 本 ， 或 者 说 是 标准 第 五 版 便 


2015 年 , 标准 第 六 版 增加 了 很 多 语言 改进 , 其 中 许多 新 的 语言 特性 受到 了 Ruby 和 Python 等 语 
言 的 影响 。 严 格 来 讲 ， 第 六 版 被 命名 为 ES2015， 但 是 更 普遍 的 叫 法 是 ES6。 

ES6 在 谷歌 的 Chrome 浏 览 器 、Mozilla 的 火狐 浏览 器 ,以 及 微软 的 Edge 浏 览 嚣 上 都 得 到 了 非常 
好 的 支持 。 这 些 都 是 长 青 的 浏览 器 ， 即 它们 会 自动 更 新 ， 无 须 用 户 手 动 下 载 或 安装 最 新 版 本 。 随 
着 谷歌 、Mozilla 以 及 微软 的 浏览 器 对 ES6 的 兼容 性 越 来 越 好 ， 开 发 者 很 快 就 能 使 用 这 些 语言 上 的 





改进 了 。 








但 是 那些 非 长 青 的 浏览 器 ， 以 及 大 多 数 手机 浏览 器 对 ES6 的 支持 非常 差 。 图 17-1 是 最 新 版 本 
的 桌面 、 手 机 浏览 器 对 ES6 特 性 的 支持 百分比 。( 图 中 ,IE = Internet Explorer FF = Mozilla Firefox、 
CH = Google Chrome、 SF = Safari、KQ = Konqueror、AN = Android, ) 





桌面 浏览 
79% 63% 85% 90% 93% 10% 21% 53% 11% 
FF 46 ChiSn, et SF9 
[0] a [4] 
OP 37 SF7 SF8 4.14 
手机 浏览 


11% 15% 29% 10% 21% 53% 


AN AN AN 


A 50 5.1 i0S7 ios 8 [iOSs9 


17-1 2016 年 春 ，ES6 特 性 的 支持 情况 
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如 果 要 看 各 大 浏览 器 对 ES6 更 新 更 详细 的 支持 情况 ,请 访问 kangax.github.io/compat-table/es6/ 


查看 最 新 信息 ， 创 建 者 Juriy Zaytsev 一 直 在 更 新 表格 数据 。 
老 旧 的 浏览 器 支持 的 特性 很 少 ， 
有 ， 不 必 等 到 所 有 浏览 器 都 支持 它 的 时 候 才 开始 使 用 。 
本 章 会 开始 开发 Chattrbox 的 用 户 界 面 ， 


二 


























所 有 浏览 器 中 运行 ， 我 们 将 使 用 开源 工具 Babel 处 理 兼容 
在 开始 之 前 ,3 


但 是 这 无 法 抵挡 我 们 对 ES6 的 钟爱 。ES6 非 常 棒 ， 你 值得 拥 


在 开发 过 程 中 会 用 到 很 多 ES6 特 性 。 为 了 让 应 用 能 在 





问题 





还 需要 处 理 一 件 事 ,以 便 更 专注 地 学 习 ES6 并 使 用 Babel。Chattrbox 项 目的 index.html 


和 stylesheets/styles.css 文 件 放 在 了 www.bignerdranch.com/downloads/front-end-dev-resou rces.zip 上 。 请 
下 载 .zip 文 件 ， 提 取 其 中 的 内 容 ( 包括 整个 stylesheets/ 文 件 夹 )， 将 内 容 复制 到 chattrbox/app 路 径 下 。 


(index.html 会 替换 项 目下 面 已 有 的 index.html 文 件 。) 


另外 ， 提 醒 一 下 : 在 编写 本 章 代码 的 过 程 中 ， 可 能 会 在 控制 台 看 到 关于 CSS 文 件 的 MIME 类 

















忽略 这 个 警告 吧 。 


和 警告。 大 可 放心 ， 


续 往 前 推进 ! 待 到 本 章 结束 ，Chattrbox 将 能 够 通过 WebSocket 和 聊天 服务 器 通信 。 





x 


@e@e@ /站 chattrbox 








对 CC [localhost:3000 





Chattrbox 





民 是 
OFiop 





_] Preserve log 


Resource interpreted as Stylesheet but transferred with MIME type text/plain: 


"http://localhost: 3000/stylesheets/styles.css", 
connecting... 





open 


message {"user":"batman","message":"pow!"," 


Object {user: "batman", message: "pow!", 
> | 





图 17-2 ”本章 
17.1 编译 JavaScript 的 工具 
Babel 是 一 个 编译 器 ， 它 负责 将 ES6 语 法 翻译 成 等 价 的 ES5 代 码 ， 

















JavaScript| 擎 下 运行 了 。 


Elements Console Sources Network Timeline Profies Resources Security » 


‘timestamp":1455565411191} 
timestamp: 1455565411191} 


localhost/:5 


ws-client,.js:5 
ws-client,js:11 
ws-client,js:18 
app, js:26 


结束 时 的 Chattrbox 


这 样 就 能 够 在 浏览 器 的 
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> babel main.js 


图 17-3 ”根据 ES6 文 件 构建 ES5 代 码 
为 了 更 高 效 地 使 用 Babel, 还 需要 安装 几 个 npm 模 块 来 运行 自动 构建 流程 。 用 Babel 将 ES6 编 译 




















成 ES5， 用 Browserify 将 模块 打包 到 一 个 单独 的 文件 ， 用 Babelify 让 两 者 ( Babel/ 和 Browserify ) 协 
同 工 作 。 另 外 还 要 用 Watchify 实 时 监听 代码 变化 ， 触 发 构建 流程 ( 如 图 17-4 所 示 )。 


Compilation 






















| Ese | 构建 工具 
Babel 
/scripts/src/main.js + 
Browserify 







观察 变化 触发 构建 


~ 了 


人 -Watchify -----” 





图 17-4 ”编译 流程 


首先 需要 安装 Babel。Babel 有 一 些 不 同 的 用 法 ， 需 要 根据 具体 需求 来 决定 。 在 Chattrbox 项 目 
里 ， 需 要 用 两 种 方式 进行 编译 : 命令 行 或 者 程序 。babel-cli 和 babel-core 这 两 个 工具 分 别 能 够 满足 
这 两 个 需求 。 此 外 , 还 需要 安装 Babel 配 置 , 用 来 编译 ES6 标 准 , 这 个 配置 叫做 babel-preset-es2015。 

在 chattrbox 目 录 运 行 下 面 的 npm 命 令 ， 安 装 合适 的 Babel 工 具 。( 参考 第 1 章 ,， 复 习 如何 使 用 管 
理 员 权 限 运行 npm install -g。) 


npm install -g babel-cli 
npm install --save-dev babel-core 
npm install --save-dev babel-preset-es2015 


接 下 来 用 刚才 安装 的 es2015 预 设 配 置 来 配置 Babel, 在 chattrbox 根 目录 下 创建 一 个 名 为 .babelrc 
的 文件 ， 写 人 下 面 的 配置 信息 : 

















{ 
"presets": [ 
"es2015" 
5 
"plugins": [] 


} 
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最 后 ， 将 Babelify 、Browserify 、Watchify 安 装 到 chattrbox/node modules/ 目 录 下 : 


npm install --save-dev browserify babelify watchify 


在 启动 Babel 后 不 久 就 会 用 到 这 三 个 工具 。 





17.2 ”Chattrbox 客户 端 应 用 程序 


前 面 两 章 已 经 将 Chattrbox 服 务 端 构建 好 了 ， 服 务 端 能 够 返回 静态 文件 ， 并 且 通 过 WebSocket 
通信 。 客 户 端 应 用 则 要 通过 WebSocket 与 服务 端 相互 收发 消息 。 客 户 端 应 用 将 为 每 条 消息 定义 一 
个 格式 。 用 户 可 以 看 到 消息 列表 ， 还 能 通过 在 表单 输入 文字 创建 新 消息 。 

这 些 功 能 将 由 以 下 3 个 模块 处 理 。 

口 ws-client 模 块 为 客户 端 程序 管理 WebSocket 通 信 。 

口 dom 模 块 向 UI 展示 数据 ， 并 处 理 表单 提交 。 

口 app 模 块 定 义 消息 结构 ， 在 ws -client 和 dom 之 间 传 递 消息 。 
图 17-5 展 示 了 三 个 模块 之 间 的 关系 。 























ws-client 模 块 app 模 块 





socket 


[EE hathessage 





WebSockets 


服务 器 








ChatList 


<li>{msg}</\i> 
<li>{msg}</li> 
<li>{msg}</\i> 














图 17-5”Chattrbox 应 用 程序 模块 








在 chattrbox/app 文 件 夹 下 创建 scripts 、scripts/dist 以 及 scripts/src 子 文件 夹 ， 如 图 17-6 所 示 。 
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@Oe@e 国 app 
6 items, 299.89 GB available 

Name ^ Kind 

® index.html HTML text 
v Ml scripts Folder 

v Bl dist Folder 

v a src Folder 
了 Ml stylesheets Folder 

Sstyles.css CSS 





图 17-6 ”chattrbox/app 文 件 夹 结 构 


现在 在 scripts/src 目 录 下 创建 如 下 4 个 JavaScript 文 件 : 
口 app.js 
口 dom.js 


口 main.js 





口 ws-client.js 


现在 的 文件 结构 变 成 了 如 图 17-7 所 示 的 样子 。 








@e@e 国 app 
10 items, 299.86 GB available 
Name ~ Kind 
index.html HTML text 
v Ml scripts Folder 
v Ba dist Folder 
v src Folder 
刁 app.js JavaScript 
与 dom.js JavaScript 
司 main.js JavaScript 
肯 ws-client.js JavaScript 
了 Nl stylesheets Folder 
回 styles.css CSS 


图 17-7 chattrbox/app 


app.js、dom.js 以 及 ws-client.js 对 应 了 图 17-5 里 的 3 个 模块 。main.js 文 件 包含 了 应 用 的 初始 化 代 
人 码 oO 


17.3” 迈 出 Babel 的 第 一 步 


前 面 已 了 项 . 所 需 的 工具 ， 项 目 文件 也 已 创建 完毕 。 现 在 开始 ES6 之 旅 。 
目前 暂时 只 在 命令 行使 用 Babel。 稍 后 会 将 命令 添加 到 npm 脚 本 中 , 实现 自动 编译 。 这 样 , 在 
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使 用 ES6 特 性 时 便 可 以 专注 于 新 语法 ， 而 不 必 在 终端 执行 额外 的 命令 。 


cLass 语 法 





构建 Chattrbox 客 户 端 程序 要 用 到 的 第 一 个 ES6 特 性 是 cLass 关 键 字 。 请 牢记 ，ES6 的 cLass 关 
键 字 跟 其 他 编程 语言 里 的 类 并 不 完全 一 样 ，ES6 的 类 只 是 为 构造 函数 和 prototype 方 法 提供 了 一 
种 简写 的 语法 。 

打开 app.js， 定 义 一 个 新 的 类 ， 命 名 为 ChatApp。 


class ChatApp { 
} 


在 本 章 中 ，ChatApp 没 有 太 多 功能 ， 不 过 最 后 应 用 里 的 大 部 分 逻辑 都 会 在 ChatApp 中 实现 。 
现在 这 个 类 的 定义 还 是 空 的 。 添 加 一 个 const ructor 方 法 ， 写 和 一 个 consoLe.1Log 声 明 : 
class ChatApp { 

constructor() { 

console.log('Hello ES6!'); 

} 
} 
每 当 实 例 化 一 个 类 时 ， 都 会 执行 constructor 方 法 。 通 常 ， 构 造 函 数 会 给 实例 的 属性 赋值 。 
接着 ， 在 appjs 中 的 ChatApp 类 声明 之 后 创建 一 个 ChatApp 实 例 。 


class ChatApp { 

constructor() { 

console.log('Hello ES6!'); 

} 
} 
new ChatApp(); 
试 运行 一 下 代码 。 打 开 第 二 个 终端 窗口 ， 切 换 到 Chattrbox 根 目录 下 ， 也 就 是 package.json、 

index.js 以 及 app/ 所 在 的 日 录 。 在 这 个 窗口 运行 构建 工具 ， 在 之 前 那个 窗口 运行 服务 端 代码 。 

为 了 测试 代码 ， 用 Babel 编 译 app/scripts/src/app.js， 将 结果 输出 到 app/scripts/dist/main.js 中 : 


babel app/scripts/src/app.js -o app/scripts/dist/main.js 
如 果 在 终端 什么 也 没 发 生 ， 这 就 对 了 ， 就 是 这 样 的 。 除 非 有 错误 ， 否 则 Babel 不 会 在 终端 输 
出 任何 内 容 (如 图 17-8 所 示 )。 


Oe@e a chattrbox 一 bash 一 80x8 
$ babel app/scripts/src/app.js -0 app/scripts/dist/main.js 
$ 









































图 17-8 ”Babel 会 默默 地 执行 
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确保 让 Node 服 务 器 在 另 一 个 终端 里 面 运行 ( 使 用 npm run dev )， 然 后 打开 浏览 器 ， 输 入 
http://localhost:3000。 现 在 应 该 能 看 到 结果 了 ( 如 图 17-9 所 示 )。 
四 由 四 /hn chatrbox 取 
二 GC | localhost:3000 六 | 三 
[| Elements Console Sources Network Timeline » x 
Chattrbox | © ® <topframe> v Preserve log 
Gol 








图 17-9 Hello ES6! 





在 app/index.html 中 加 载 了 由 app.js 生 成 的 main.js。 因 为 app.jjs 创 建 了 一 个 新 的 ChatApp 实 例 ， 
所 以 会 运行 ChatApp 中 的 构造 聘 数 ， 并 打印 出 Hello ES6!。 
现在 已 经 用 Babel 处 理 过 单个 JavaScript 文 件 了 ， 接 下 来 就 要 处 理 多 个 模块 (文件 ) 了 。 





17.4 ”使 用 Browserify 打包 模块 


ES5 没 有 内 置 的 模块 系统 。 在 前 面 构建 CoffeeRun 时 , 曾 使 用 过 一 个 变通 的 办 法 来 写 模块 代码 ， 
但 这 需要 修改 一 个 全 局 变量 。 

ES6 提 供 了 真正 的 模块 ， 就 像 其 他 语言 的 模块 一 样 。Babel 能 够 理解 ES6 模 块 语 法 ， 但 是 没 法 
将 其 转换 成 等 价 的 ES5 代 码 ， 所 以 就 需要 使 用 Browserify 了 。 

图 17-10 展 示 了 Browserify 和 Babel 搭 配 使 用 的 方式 。 


= 
| Ese | 
| | | 


图 17-10 ”使 用 Babel 和 Browserify 将 ES6 模 块 转换 成 ES5 模 块 
默认 情况 下 ，Babel 将 ES6 模 块 语 法 转换 成 等 价 的 Node.js 风 格 的 require 和 module.exports 
语法 。 接 着 Browserify 将 Node.js 模 块 代码 转换 成 ES5 可 以 识别 的 函数 。 
打开 package.json 为 Browserify 添 加 一 段 配 置 : 



































"Scripts": { 
"test": "echo \"Error: no test specified\" AS 
exit 1", 
"start": "node index.js", 
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"dev": "nodemon index.js", 
}, 
"browserify": { 
"transform": [ 
["babelify", {"presets": ["es2015"], "sourceMap": true}] 
] 
}, 





这 上段 代码 告诉 Browserify 将 Babelify 当 作 一 个 插件 。 它 给 Babelify 传 递 了 两 个 选项 : 第 一 个 激 
活 了 ES2015 编 译 器 选项 ; 另 一 个 启用 了 sourceMap 选 项 ,这 样 有 助 于 调试 ,在 接 下 来 构建 Chattrbox 
的 过 程 中 ， 会 介绍 怎样 使 用 source maps 进 行 调试 。 

跟 nodemon 一 样 , 最 好 为 通用 的 Browserify 任 务 编 写 一 些 脚本 。 打 开 package.json 在 "scripts" 
字段 写 人 以 下 代码 。( 记得 在 "dev": "nodemon index.js" 结 尾 加 上 逗号 。) 





















































"scripts": { 


"test": "echo \"Error: no test specified\" && exit 1", 
"start": "node index.js", 
"dev": "nodemon index.js", 


"build": "browserify -d app/scripts/src/main.js -0o app/scripts/dist/main.js", 

"watch": "watchify -v -d app/scripts/src/main.js -0o app/scripts/dist/main.js" 
}, 
"browserify": { 

"transform": [ 

["babelify", {"presets": ["es2015"], "sourceMap": true}] 

] 

}, 





第 一 个 脚本 buitld 直接 使 用 browserify 命 令 。 第 二 个 脚本 watch 则 在 代码 改变 时 使 用 
watchify 重 新 运行 browserify ( 跟 nodemon 类 似 的 功能 )。 

现在 开始 使 用 ES6 模 块 系统 。 在 ES6 模 块 中 ， 必 须 明确 地 导出 想 让 别人 使 用 的 模块 代码 。 修 
改 appjs， 导 出 ChatApp 类 ， 而 不 是 简单 地 创建 一 个 实例 。 

class ChatApp { 


constructor() { 
console.log('Hello ES6!'); 


} 
} 











new—ChatApp OT 

export default ChatApp; 

这 段 代码 指定 ChatApp 就 是 app 模 块 里 面 可 用 的 默认 值 。 其 他 模块 可 能 会 导出 多 个 值 。 如 遇 
只 需要 导出 一 个 值 ， 最 好 使 用 export default。 

在 main.js 中 导入 ChatApp 类 ， 创建 一 个 实例 。 


import ChatApp from './app'; 
new ChatApp(); 


main.js 将 app.js 导 出 的 ChatApp 类 导入 进来 。 导 入 之 后 ,创建 一 个 ChatApp 类 的 实例 。 








‘i 
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注意 ， 在 mainjs 中 导 和 人 的 类 名 是 否 叫 ChatApp 并 不 重要 ， 因 为 ChatApp 是 app.js 默 认 的 导出 值 。 
比如 ， 写 成 import MyChatApp from' ./app' 就 会 将 默认 的 导出 值 赋 给 当前 作用 域 下 的 MyChatApp 
变量 名 。 只 不 过 在 导入 时 命名 为 ChatApp 是 最 佳 实践 ， 因 为 它 在 appjs 中 的 名 字 就 是 如 此 。 
执行 构建 操作 

现在 打开 终端 ， 运 行 构建 脚本 : 

npm run build 


npm 会 运行 build 命 令 ， 该 命令 将 调用 browserify。 运 行 每 个 命令 时 ， 都 会 显示 当前 正在 执 














行 的 操作 。 但 Browserify 不 会 打印 任何 信息 ， 除 非 遇 到 错误 ( 如 图 17-11 所 示 )。 
@O@e@ 二 | chattrbox 一 bash 一 82x8 





$ npm run build 


> chattrboxe09.0.90 build /Users/chrisaquino/Projects/chattrbox 
> browserify -d app/scripts/src/main.js -0 app/scripts/dist/Vmain.js 


$s 


图 17-11 通过 npm run build 运 行 Browserify 


Browserify 成 功 运 行 后 ， 就 会 将 app/dist/ 文 件 夹 下 Babel 编 译 生 成 的 main.js( 就 是 前 面 手动 编 
译 的 结果 ) 打包 。 

重新 加 载 浏览 器 就 能 看 到 输出 。 这 里 并 没有 新 增 功能 ， 只 修改 了 ChatApp 构 造 函 数 的 调用 位 
置 ， 因 此 在 控制 台 看 到 的 消息 与 之 前 一 样 ( 如 图 17-12 所 示 )。 

















oeoe D Chattrbox x (i 二 
€ SC |D localhost:3000 立 医 
民 0 Elements Console Sources Network Timeline » x 
Chattrbox © 宣 <topframe> v Preserve log 
Hello ES6! main.is:8 
> 
Gol 


图 17-12 ”再 次 Hellol 


下 一 步 是 使 用 Watchify 。 就 像 用 nodemon 运 行 Nodejs 服 务 器 一 样 ，Watchify 可 以 用 来 运行 
Browserify 编 译 程序 一 一 只 要 修改 了 源 文件 ， 它 就 会 自动 触发 重新 编译 。 
启动 Watchify。 只 要 修改 代码 ， 就 会 开始 编译 : 


npm run watch 
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Watchify 会 在 控制 台 显 示 编 译 状态 〈 如 图 17-13 所 示 )。 


@Oe@e ‘| chattrbox 一 node 一 82x8 


$ npm run watch 





> chattrboxe8.9.9 watch /Users/chrisaquino/Projects/chattrbox 
> watchify -~v -d app/scripts/src/main.js -0 app/scripts/dist/main.js 


8911 bytes written to app/scripts/dist/main.js (9.52 seconds) 


图 17-13 ”通过 npm run watch 运行 Watchify 


Watchify 比 Browserify“ 健 谈 ” 多 了 一 -一 它 每 次 运行 Browserify 时 ， 都 会 显示 向 文件 里 写 人 了 
多 少 字 节 。 虽 然 也 没 太 大 用 处 ， 但 是 输出 发 生 改 变 时 ， 你 都 能 得 到 通知 。 开 着 终端 让 Watchify 保 
持 运 行 ， 继 续 开发 Chattrbox。( 之 前 还 有 一 个 终端 运行 着 服务 端 程序 。) 


17.5 新 增 ChatMessage 类 


虽然 用 两 个 终端 聊天 很 好 玩 〈 还 能 让 你 在 咖啡 馆 看 起 来 酷 酷 的 )， 不 过 是 时 候 升 级 应 用 ， 让 
它 能 在 浏览 需 之 间 发 送 消息 了 。 接 下 来 新 增 一 个 辅助 类 ， 用 于 构造 和 格式 化 消息 数据 。 

每 条 消息 需要 记录 三 类 信息 : 消息 内 容 、 是 谁 发 送 的 和 什么 时 候 发 送 的 。 

JavaScript 对 象 表示 法 (JavaScript Object Notation ) 更 常见 的 说 法 是 JSON ( 发 音 同 Jason ， 
源 自 JSON 发 明 者 Douglas Crockford ) 一 一 是 一 个 轻 量 级 的 数据 交换 格式 ， 你 在 package.json 文 件 
中 已 经 用 到 了 它 。 这 种 格式 具备 可 读 性 ， 独 立 于 语言 ， 而 且 很 适合 Chattrbox 的 数据 交换 。 

这 里 有 一 个 简单 的 JSON 格 式 的 消息 : 

{ 


"message": "I'm Batman", 

"user": "batman", 

"timestamp": 614653200000 
} 


Chattrbox 的 消息 数据 有 两 个 来 源 : 一 个 是 客户 端 , 由 用 户 填写 的 表单 产生 ; 另 一 个 是 服务 端 ， 
经 由 一 个 WebSocket 连 接 将 消息 发 送 到 其 他 客户 端 。 

对 于 表单 产生 的 消息 ,需要 先 给 消息 体 增 加 用 户 名 和 时 间 戳 ,然后 才能 将 其 发 给 服务 端 。 对 
于 服务 端 产生 的 数据 ,这 三 类 信息 都 会 包含 在 内 。 如 何 处 理 这 种 差异 呢 7 有 很 多 解决 办 法 ,下面 
简单 介绍 几 个 ， 其 中 一 些 还 利用 了 便捷 的 ES6 特 性 。 

在 app.js 里 新 建 一 个 cLass 来 表示 每 条 聊天 消息 。 


class ChatApp { 
constructor() { 
console.log('Hello ES6!'); 
} 
} 
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class ChatMessage { 
constructor(data) { 


} 
} 


export default ChatApp; 
第 一 种 方式 就 是 使 用 简单 的 构造 函数 接收 消息 内 容 、 用 户 名 以 及 时 间 蕉 。( 下 面 只 是 个 例子 ， 
请 不 要 据 此 修改 你 的 项 目 代 码 。) 























class ChatMessage { 
constructor(message, user, timestamp) { 
this.message = message; 
this.user = user || 'batman',; 
this.timestamp = timestamp || (new Date()).getTime(); 
} 
} 





这 种 模式 在 前 面 已 经 出 现 很 多 次 了 。 将 参数 值 赋 给 实例 的 属性 , 使 用 | | 操作 符 为 用 户 名 和 时 
间 截 提供 一 个 默认 值 。 
这 种 方式 没 问题 ， 不 过 ES6 提 供 的 默认 参数 值 能 以 更 简洁 的 方式 实现 相同 的 模式 。 














Cas ChatMessage { 
constructor(message, user='batman', timestamp=(new Date()).getTime()) { 
this.message = message; 
this.user = User; 
this.timestamp = timestamp; 
} 
} 
该 语法 可 以 很 清楚 地 表示 哪些 参数 必须 传 ， 哪 些 参 数 可 选 。 在 上 面 的 代码 里 ， 只 有 message 
参数 是 必需 的 ， 其 余 参 数 都 有 默认 值 。 
上 面 的 构造 函数 可 以 处 理 服 务 端 发 送 的 消息 或 用 户 通 过 表单 创建 的 消息 , 但 要 求 调用 者 清楚 
参数 的 顺序 。 一 旦 某 些 函数 、 方 法 需要 3 个 或 3 个 以 上 参数 时 ， 这 种 传 参 方式 就 不 够 灵活 了 。 
还 有 一 种 方式 是 将 一 个 单独 的 对 象 作 为 参数 ,使 用 键 值 对 来 指定 消息 内 容 、 用 + 名 和 时 间 戳 。 
这 种 方式 可 以 使 用 解构 赋值 语法 ( destructuring assignment syntax ) 来 实现 。 























class ChatMessage { 
constructor({message: m, user: u, timestamp: t}) { 
this.message = m; 
this.user = U; 
this.timestamp = t; 
} 
} 
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解构 看 上 去 可 能 有 点 奇怪 ， 下 面 就 是 它 的 使 用 方法 。 像 下 面 这 样 调 用 构造 函数 : 


new ChatMessage({message: 'hello from the outside', 
user: 'adele25@bignerdranch.com', timestamp=1462399523859}); 


解构 语法 在 参数 中 查找 message 键 发现 有 值 'hello from the outside' ， 于 是 赋值 给 一 
个 新 的 局 部 变量 mn， 然后 就 可 以 在 构造 函数 体 中 使 用 该 变量 了 。 对 于 username 和 timestamp 属 性 
也 是 如 此 。 

但 是 使 用 上 面 这 种 方式 就 不 能 利用 默认 参数 的 便利 性 了 。 万 幸 , 可 以 将 默认 参数 和 解构 赋值 
结合 起 来 ， 所 以 app.js 里 构造 函数 的 最 终 版 长 下 面 这 样 : 



































class ChatMessage { 
constructor{data}{ 
message: m, 
user: u='batman', 
timestamp: t=(new Date()).getTime() 
}) +{ 
this.message = m; 
this.user = u; 
this.timestamp = t; 
} 
} 

















这 一 版 代码 把 传 给 构造 函数 的 对 象 里 的 值 提 取出 来 。 任 何 没有 赋值 的 参数 都 有 默认 值 。 
尽管 默认 参数 只 能 存在 于 函数 (或 者 构造 函数 ) 定义 里 , 解构 却 可 以 在 赋值 操作 时 使 用 。 上 
面 的 构造 函数 也 可 以 写成 下 面 这 样 : 











class ChatMessage { 
constructor(data) { 
var {message: m, user: u='batman', timestamp: t=(new Date()).getTime()} = data; 
this.message = m; 
this.user = u; 
this.timestamp = t; 
} 
} 





好 ， 题 外 话 就 说 完了 。 现 在 回 到 构建 Chattrbox 上 。 

ChatMessage 类 将 所 有 重要 信息 存储 为 属性 , 但 是 实例 还 继承 了 ChatMessage 的 方法 和 其 他 
信息 ， 这 使 得 ChatMessage 的 实例 不 适合 通过 WebSocket 发 送 。 因 此 ， 需 要 一 个 信息 的 简化 版 。 

在 appjs 里 添加 一 个 序列 化 (serialize ) 方法 ， 用 于 将 ChatMessage 里 的 属性 转化 成 一 个 
简单 的 JavaScript 对 象 。 























class ChatMessage { 
constructor({ 
message: m, 
user: U='batman '， 
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timestamp: t=(new Date()).getTime() 
}) { 

this.message = m; 

this.user = u; 

this.timestamp = t; 


serialize() { 
return { 
user: this.user, 
message: this.message, 
timestamp: this.timestamp 
}; 
} 
} 





export default ChatApp; 
ChatMessage 类 现在 已 经 可 用 了 ， 下 面 来 开发 Chattrbox 的 下 一 个 模块 。 


17.6 创建 ws-cLient 模块 


ws-client.js 模 块 负责 与 Node WebSocket 服 务 器 通信 。 
它 有 4 项 职责 。 

口 连接 到 服务 器 。 

口 在 初次 建立 连接 时 执行 初始 化 配置 。 

口 将 到 达 的 消息 发 给 相应 的 处 理 程序 。 

口 癌 外 发 送 消息 。 


看 一 下 这 些 职 责 是 如 何 关 联 到 其 他 组 件 的 ( 如 图 17-14 所 示 )。 








ws-client 模 块 


到 达 的 消息 






WebSockets 


服务 器 








app 模块 
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图 17-14 ws-client 接 口 


在 构建 客户 端的 过 程 中 ， 我 们 还 将 认识 一 些 ES6 的 新 特性 。 
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17.6.1 “处理 连接 
首先 创建 连接 的 处 理 程序 。 打 开 ws-client.js 文 件 ， 给 WebSocket 连 接 声明 一 个 变量 。 


let socket; 


上 面 的 声明 使 用 了 ES6 中 定义 变量 的 新 方法 , 叫 作 Let 作 用 域 。 假 如 你 使 用 Let 作 用 域 来 声明 
个 变量 一 一 关键 字 不 是 var， 而 是 Let 一 一 那么 变量 将 不 会 被 提升 (hoist )。 
提升 的 意思 是 , 变量 声明 被 移动 到 创建 这 些 变 量 的 函数 作用 域 的 开头 , 这 属于 JavaScript 解 析 
器 在 后 台 执行 的 操作 。 不 幸 的 是 ， 这 些 操作 会 导致 一 些 难以 察觉 的 错误 。 
在 本 章 最 后 会 介绍 更 多 有 关 提 升 的 知识 , 现在 只 需要 知道 : 在 if/else 语 句 和 循环 体 里 , Let 
是 一 种 更 安全 的 声明 变量 的 方式 。 
现在 ， 向 ws-clientjs 文 件 里 添加 一 个 方法 ， 用 来 初始 化 连接 。 


let Socket ; 





















































function init(urL) { 
socket = new WebSocket(urtL) ; 
console.log('connecting...'); 


} 


init 消 数 连接 到 WebSocket 服 务 器 。 接 下 来 ， 要 把 ws-client.js 导 入 到 app.js 的 ChatApp 中 。 

为 了 能 被 调用 ，ws-clientjs 要 指定 导出 的 内 容 。 这 里 需要 导出 一 个 单独 的 值 : 一 个 将 导出 的 
函数 作为 属性 值 的 对 象 。 跟 本 章 开 头 一 样 ， 使 用 export default 语 法 一 一 加 上 额外 的 ES6 简 写 
方法 。 

将 export 添 加 到 ws-client.js 的 最 后 ， 如 下 所 示 : 

















function init(url) { 
socket = new WebSocket (url); 
console.log('connecting...'); 


} 
export default { 
init, 
} 
注意 ,不 需要 指定 属性 名 称 。 这 种 语法 缩写 等 价 于 : 
export default { 
init: init 
} 
假如 键 和 值 名 称 一 样 ，ES6 人 允许 省 略 冒号 和 值 。 键 会 自动 作为 变量 名 ， 值 会 自动 关联 到 变量 
名 对 应 的 值 。 这 个 ES6 特 性 是 增强 版 的 对 象 字面 量 语法 。 
现在 ws -client 模 块 已 经 创建 完毕 , 接 下 来 要 在 app.js 中 导入 ws -client 模 块 提 供 的 值 , 首先 
在 app,js 的 开头 添加 一 个 导入 声明 : 
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import socket from './ws-client'; 


class ChatApp { 
constructor() { 
console.log('Hello ES6!'); 
} 
} 


socket 就 是 从 ws-client.js 中 导出 的 对 象 。 
接 下 来 ,在 ChatApp 构 造 函 数 中 调用 socket .init 方 法 ,将 WebSocket 服 务 器 的 URL 传 进去 。 
import socket from './ws-client'; 


class ChatApp { 
constructor() { 


€enseleteg(" Helle ES6L) 二 
socket.init('ws://LocaLhost:3001' ) ; 
} 
} 


npm 脚 本 会 重新 编译 代码 。( 假如 已 经 停止 了 npm run watch 或 者 npm run dev， 需 要 在 
不 同 的 窗口 重启 这 两 个 脚本 。) 重新 加 载 浏览 絮 ， 会 看 到 控制 台 打 印 出 'connecting...'， 如 
图 17-15 所 示 。 














@@e@ D Chattrbox X 二 | 
二 GC 口 localhost:3000 ~ = 
区 0 Elements Console Sources Network Timeline » 并 
Chattrbox © 字 <topframe> Preserve log 
connecting... Ws-client.is:5 
> 
Gol 


图 17-15 ”WebSocket 初 始 化 时 打印 出 来 的 消息 。 
现在 已 经 启动 并 开始 运行 应 用 程序 主体 部 分 了 。 


17.6.2 ”处 理事 件 并 发 送 消 息 





当 App 模 块 调用 init 方 法 时 , 会 实例 化 一 个 新 的 WebSocket 对 象 , 并 与 服务 器 建立 一 个 连接 。 
但 是 App 模 块 需要 感知 到 该 操作 已 经 完成 ， 以 便 在 连接 上 进行 一 些 操作 。 

WebSocket 对 象 提 供 了 一 系列 专门 用 于 人 处理 事件 的 属性 ， 其 中 一 个 是 onopen 属 性 。 当 与 
WebSocket 服 务 器 的 连接 成 功 建立 时 ， 就 会 调用 赋 给 这 个 属 














遇 性 的 函数 。 在 这 个 函数 中 ， 可 以 对 连 
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进行 任何 操作 。 
为 了 让 ws-client 模 块 灵活 且 可 复 用 , 请 不 要 将 App 模 块 需要 对 连接 执行 的 操作 进行 硬 编码 ， 
而 是 使 用 与 在 CoffeeRun 中 注册 点 击 和 提交 处 理 程序 时 一 样 的 模式 。 
给 ws-clientjs 添 加 一 个 register0penHandLer 国 数 。register0penHandtLer 接 受 一 个 回调 
函数 作为 参数 ， 给 onopen 赋 一 个 函数 ， 然 后 在 这 个 onopen 函 数 中 调用 回调 函数 。 


let socket; 


























function init(url) { 
socket = new WebSocket (url); 
console.log('connecting...'); 


} 


function registerOpenHandler(handlerFunction) { 
socket.onopen = () => { 
consoLe.Log('open ' ) ; 
handlerFunction(); 
}; 
} 


onopen 国 数 定义 跟 以 前 写 的 不 太一 样 。 这 种 方式 是 ES6 的 一 种 新 语法 ， 叫 做 箭头 函数 。 箭 头 
函数 是 匿名 函数 的 一 种 缩写 方式 。 除 了 写 起 来 更 简单 ， 箭 头 函 数 与 一 般 的 匿名 函数 一 模 一 样 。 
register0penHandLer 接 受 一 个 函数 参数 (handLerFunction )， 并 给 socket 连 接 的 onopen 
属性 赋值 为 一 个 匿名 函数 。 在 这 个 匿名 函数 内 ， 调 用 参数 handterFunction。 

(使 用 匿名 函数 比 写 socket ,onopen = handlerFunction 要 复杂 一 些 。 当 需要 响应 一 个 事 
件 但 需要 执行 比如 打印 日 志 消 息 一 一 使 用 匿名 函数 效果 更 好 。 ) 

接 下 来 需要 写 一 个 接口 , 用 来 处 理 经 由 WebSocket 连 接收 到 的 消息 。 在 ws-client.js 上 新 增 一 个 
registerMessageHandtLer 方 法 。 将 socket 的 onmessage 属 性 赋值 为 一 个 箭头 函数 , 该 箭头 函数 
接受 一 个 事件 参数 。 






























































function registerOpenHandler(handlerFunction) { 
socket.onopen = () => { 
console.log('open'); 
handlerFunction(); 
}; 
} 


function registerMessageHandler(handlerFunction) { 
socket.onmessage = (e) => { 
console.log('message', e.data); 
let data = JSON.parse(e.data) ; 
handLerFunction(data) ; 
}; 
} 
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箭头 函数 的 参数 位 于 括号 内 ， 和 常规 函数 一 样 。 

在 registerMessageHandLer 内 ，Chattrbox 客 户 端 程序 能 通过 onmessage 回 调 函 数 接受 服务 
端 发 来 的 一 个 对 象 。 该 对 象 表示 消息 事件 ， 它 有 一 个 data 属 性 ， 包 含 了 服务 端 发 送 的 JSON 字 符 
串 。 每 收 到 一 个 字符 串 ， 就 需要 将 字符 串 转 换 成 JavaScript 对 象 ， 然 后 将 其 发 送 给 handtLer- 
Function。 

还 需要 最 后 一 部 分 代码 ， 用 来 将 消息 发 送 给 WebSocket 。 在 ws-clientjs 中 增加 一 个 
sendMessage 函 数 。 发 送 消 息 总 共 分 两 步 : 首先 将 返回 的 消息 内 容 (包括 消息 内 容 、 用 户 名 和 时 
间 戳 ) 转换 成 JSON 字 符 串 ， 然 后 将 JSON 字 符 串 发 送 给 WebSocket 服 务 器 。 
































function registerMessageHandler(handlerFunction) { 
socket.onmessage = (e) => { 
console.log('message', e.data); 
let data = JSON.parsel(e.data); 
handlerFunction(data); 
}; 
} 


function sendMessage(payload) { 
socket .send(JSON.stringify(payload)); 
} 





最 后 ， 使 用 增强 版 的 对 象 字面 量 语法 将 新 增 方 法 导出 。 


function sendMessage(payload) { 
socket.send(JSON.stringify(payload)); 
. 


export default { 
init, 
registerOpenHandler, 
registerMessageHandler, 
sendMessage 


} 

现在 ws-client.js 已 经 具备 了 所 有 跟 服务 端 通信 的 方法 。 最 后 一 项 工作 就 是 测试 ws-clientjs: 用 
这 个 模块 发 送 一 条 消息 。 
17.6.3 ”发 出 和 回应 一 条 消息 


在 app.js 里 更 新 ChatApp 构 造 函 数 。 调 用 socket.init 之 后 ， 调 用 register0penHandler 和 
registerMessageHandLer， 为 它们 传递 箭头 函数 。 


import socket from './ws-client'; 














class ChatApp { 
constructor() { 
socket.init('ws://localhost:3001'); 
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socket.registerOpenHandler(() => { 
Let message = new ChatMessage({ message: 'pow!' }); 
socket .sendMessage (message.serialize()); 

}); 

socket .registerMessageHandler((data) => { 
console.1log(data); 

}); 

} 
上 








建立 连接 之 后 ， 立 即 发 送 一 条 模拟 消息 。 收 到 消息 后 ， 控 制 台 打印 出 消息 。 
保存 代码 ， 在 编译 完成 后 刷新 浏览 天 ， 就 能 看 到 发 送 和 回应 的 消息 了 ( 如 图 17-16 所 示 )。 


eee D Chattrbox x 


x | he 





所 CC [0 localhost:3000 





RD Elements Console Sources Network Timeline Profiles Resources Audits 


Chattrbox © 宇 <topframe> v Preserve log 


connecting... ws-client.is:6 


ws-Client.is:14 
ws-Client.is:21 
app: is:46 


open 
message {"user":"batman","message":"pow!","timestamp":1442820927527} 


Object {user: "batman", message: "pow!", timestamp: 1442828927527} 
> 











图 17-16 通过 WebSocket 调 用 和 响应 























简直 太 棒 了 ! 现在 已 经 完成 了 Chattrbox 的 三 个 主要 模块 中 的 两 个 了 ， 下 一 章 将 会 完成 
Chattrbox 的 全 部 功能 。 在 下 一 章 中 , 我 们 将 会 创建 一 个 模块 ， 这 个 模块 负责 将 已 有 的 模块 关联 到 
UI 中 。 该 模块 会 将 新 消息 演 染 到 消息 列表 ， 并 在 提交 表单 时 将 消息 发 出 。 


17.7 ”延展 阅读 : 将 其 他 语言 编译 成 JavaScript 


有 少数 语言 能 够 被 编译 成 JavaScript。 下 面 有 一 个 简短 的 列表 : 
D CoffeeScript: coffeescript.org 





D TypeScript: www.typescriptlang.org 





DQ C/C++: kripken.github.io/emscripten-site 











其 中 最 重要 的 是 CoffeeScript, 它 提供 了 一 些 最 常见 模式 的 简写 语法 ( 比如 匿名 函数 的 箭头 语 
法 )。 实际 上 ，CoffeeScript 对 ES6 有 举足轻重 的 影响 。 

Google 、MicroSoft 、Mozilla 还 有 其 他 公司 合作 创建 了 一 个 项 目 ， 用 来 标准 化 一 个 用 于 
JavaScript 引 擎 的 assembly 语 言 。 该 项 目 叫 作 WebAssembly， 目 标 是 创建 一 种 由 多 种 语言 编译 而 成 
的 高 性 能 低级 语言 。 

WebAssembly 的 目的 是 补充 JavaScript ( 而 不 是 取代 它 ) 并 利用 多 种 语言 的 优点 。 比 如 ， 
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JavaScript 擅 长 于 创建 基于 浏览 器 的 应 用 程序 ,但 是 并 不 擅长 泻 染 数学 密集 型 的 游戏 图 像 ; 而 C 和 
C++ 则 极其 擅长 演 染 游戏 代码 。 与 其 将 C++ 代 码 移植 成 JavaScript 并 且 造 成 潜在 的 bug， 倒 不 如 将 
其 编译 成 WebAssembly。 

WebAssembly 项 目 发 源 于 一 个 早期 项 目 asm.js。asm.js 项 目 定义 了 JavaScript 的 一 个 子 集 , 由 在 
编写 高 性 能 的 代码 。 

更 多 有 关 asm.js 和 WebAssembly 的 信息 请 查看 JavaScript 之 父 的 这 篇 文章 : brendaneich.com/ 
2015/06/from-asm-js-to-webassembly。 


17.8 初级 挑战 : 默认 导入 名 称 


你 在 mainjs 中 导入 声明 ， 创建 了 一 个 叫 作 ChatApp 的 本 地 变量 。 假 如 把 变量 名 改 成 
ApplicationForChatting 会 怎样 呢 ? 

试 一 下 (但 是 要 确保 下 一 行 的 new 声 明 也 改 成 新 的 变量 名 )， 看 看 是 不 是 还 能 生效 。 如 果 能 ， 
为 什么 ?如 果 不 能 ， 为 什么 不 能 ? 


17.9 中 级 挑战 : 提醒 连接 关闭 


在 ws- cLient 模 块 中 添加 一 个 新 的 函数 registerCLoseHandLer。 这 个 函数 接受 一 个 回调 函 
数 ， 当 在 socket 上 触发 关闭 事件 时 ， 调 用 这 个 回调 函数 。 

在 main.js 中 用 registerCtoseHandLer 提 醒 用 户 连接 被 关闭 了 ， 然 后 测试 函数 是 否 生 效 。 
怎样 测试 呢 ? 显然 不 能 关闭 浏览 器 窗口 ， 因 此 需要 关闭 连接 的 另 一 端 。 
再 交 给 你 一 个 额外 任务 : 写 一 个 函数 来 尝试 重 连 。 可 以 用 一 个 setTimeout 或 者 请 求 用 户 的 
确认 (在 MDN 上 搜索 更 多 细节 )。 


17.10 ”延展 阅读 : 变量 提升 


JavaScript 的 问世 使 得 非 专业 程序 员 也 可 以 创建 一 些 具 有 基本 交互 性 的 Web 内 容 。 尽 管 这 门 
语言 有 些 特性 由 在 让 代码 具备 抗 错误 性 , 但 是 有 些 特性 在 实践 中 却 容易 造成 错误 ， 其 中 之 一 便 
是 提升 。 
当 JavaScript3 引 | 擎 解 析 代 码 的 时 候 , 它 会 查找 所 有 的 变量 和 函数 声明 , 将 它们 移 到 其 所 在 函数 
的 顶部 。( 假如 它们 不 在 函数 内 ， 则 会 在 其 余 代 码 之 前 被 计算 。) 

示例 能 给 出 最 好 的 说 明 。 如 下 代码 : 


function logSomeValues () { 
console. log(myVal); 
var myVal = 5; 
console. log(myVal); 









































































































































将 会 被 解析 成 下 面 这 样 : 
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function logSomeValues () { 
var myVal; 
console. log(myVal); 
myVal = 5; 
console. log(myVal); 
} 


如 果 在 控制 台 调 用 LogSomeValues， 将 会 看 到 下 面 这 样 的 输出 : 


> logSomeValues(); 
Undefined 
5 








主意 ， 只 有 声明 被 提升 了 ,赋值 操作 还 在 原 地 。 这 自然 会 让 人 迷惑 ,尤其 当 你 试图 在 if 或 者 
循环 量 时 。 在 其 他 语言 中 ， 大 括号 表示 一 个 代码 块 ， 拥 有 自己 的 作用 域 。 在 JavaScript 
中 ， 大 括号 并 不 会 创建 作用 域 ， 只 有 函数 才 创建 作用 域 。 
来 看 另 一 个 示例 : 
var myVal = 11; 
function doNotWriteCodeLikeThis() { 
if (myVal > 10) { 
var myVal = 0; 
console.log('myVal was greater than 10; resetting to 0'); 
} else { 
console.log('no need to reset.'); 


} 


return myVal; 


} 


你 的 预期 也 许 是 在 控制 台 打 印 出 'myVal was greater than 10; resetting to 0', 并 
返回 值 为 0。 但 是 ， 真 实 的 输出 如 下 : 


> doNotwriteCodeLikeThis(); 
no need to reset. 
undefined 


var myVazL 声 明 被 移 到 函数 顶部 ， 所 以 在 执行 if 语句 之 前 ，myValL 的 值 为 undefined。 赋 值 
操作 仍然 保持 在 if 代 码 块 中 。 
函数 声明 也 会 被 提升 ， 不 过 它 是 被 整体 提升 。 也 就 是 说 下 面 的 代码 会 正常 运行 


boo(); 





























// 在 调用 之 后 声明 : 
function boo() { 
console.log('B00!!'); 





} 

JavaScript 将 整个 函数 声明 块 移动 到 顶部 ， 调 用 boo 不 会 有 任何 问题 : 
> boo(); 

B0011 





提升 并 不 会 移动 let 声明， 同样 也 不 会 移动 const 声 明 ， 它 用 于 声明 无 法 重新 赋值 的 变量 。 





17.11 延展 阅读 : 箭头 函 才 





17.11 延展 阅读 : 箭头 函数 





我 收回 前 面 的 话 : 箭头 函数 的 功能 并 不 完全 等 同 于 匿名 函数 。 在 某 些 情况 下 , 箭头 函数 更 好 。 





除了 提供 简短 的 语法 ， 箭 头 函 数 有 以 下 优点 。 








口 假如 只 有 一 句 声明 的 话 ， 可 以 省 略 大 括号 。 
口 在 省 略 大 括号 的 情况 下 ， 会 返回 这 一 句 声明 的 结果 。 





























举 个 例子 ， 这 里 是 CoffeeRun 的 CheckList.prototype.addClickHandler 方 法 : 


CheckList.prototype.addClickHandler = function(fn) { 


this.$element.on('click', 'input', function (event) { 
var email = event.target.value; 
fn(email) 


.then( function () { 
this.removeRow(email); 
}.bind(this)); 
}.bind(this)); 
}; 


将 这 里 的 匿名 函数 替换 成 箭头 函数 ， 会 使 代码 简洁 一 些 : 


CheckList.prototype.addClickHandler = (fn) => { 





this.$element.on('click', 'input', (event) => { 
Let email = event.target.value; 
fn(email) 
.then(() => this.removeRow(email)); 
}); 
}; 


去 掉 多 余 的 function 和 .bind(this) 后 ，addCLickHandtLer 的 功能 更 突出 了 。 





口 可 以 实现 function(){},.bind(this ) 的 效果 ， 让 this 指 向 箭头 函数 本 身 所 处 的 作用 域 。 





继续 ES6 探 索 之 旅 




















Chattrbox 是 真正 能 使 用 的 应 用 , 但 是 目前 只 实现 了 “底层 "业务 逻辑 : 连接 WebSocket 服 务 器 、 
定义 消息 格式 以 及 发 送 和 接收 消息 。 

本 章 将 完成 Chattrbox 的 最 后 一 部 分 : 添加 UI 层 。 这 个 过 程 将 继续 使 用 Node 和 npm 管 理 编译 程 
序 , 提供 服务 端 应 用 。 等 到 本 章 结束 , 一 个 全 功能 的 Web 聊 天 应 用 将 会 重 磅 登场 ( 如 图 18-1 所 示 )。 
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Chattrbox 


人 入 clark.kent@bignerdranch.com 5 minutes ago 
[a 和 
到 
diana.prince@bignerdranch.com 5 minutes ago 
one sec, finishing a code review 
A clark.kent@bignerdranch.com 4 minutes ago 
攻 I k.tacos? 
diana.prince@bignerdranch.com 2 minutes ago 
totes. let's do elmyriachi. 
您 clark.kent@bignerdranch.com a minute ago 
息 yesl patiooooooooool 


图 18-1 ”完成 后 的 Chattrbox 

















在 构建 CoffeeRun 时 ,创建 了 FormHandler 和 CheckList 模 块 ， 这 两 个 模块 分 别 对 应 表单 和 
列表 区 域 。Chattrbox 将 使 用 相同 的 模式 ,创建 ChatForm 和 ChatList 模 块 。 

还 要 创建 一 个 UserStore 模 块 ， 用 来 保存 当前 聊天 用 户 的 信息 。 这 些 模 块 能 让 Chattrbox 程 序 
更 健壮 ， 并 且 让 主要 模块 拥有 更 好 的 复 用 性 。 
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18.1 将 jQuery 安装 成 一 个 Node 模块 




















Chattrbox 将 使 用 jQuery 进行 DOM 操 作 。 但 是 这 次 不 会 像 CoffeeRun 那 样 从 cdnjs.com 去 加 载 





jQuery， 也 不 会 像 以 前 集成 客户 端 依赖 那样 在 HTML 中 使 用 <script> 标 签 。 
Browserify 会 自动 将 JavaScript 依 赖 项 构建 到 浏览 器 使 用 








有 了 Browserify ,这些 都 不 需要 了 
的 应 用 程序 包 中 。 所 以 ， 现 在 如 果 想 集成 jQuery， 只 需要 通过 import 包 含 
理 剩 下 的 事情 。 

首先 ， 安 装 jQuery 库 到 node _ modules 文 件 夹 : 

npm install --save-dev jquery 

打开 dom.js 文 件 ， 开 始 编写 该 模块 代码 。dom.js 模 块 将 会 用 到 jQuery， 
声明 以 包含 它 。 

import $ from 'jquery'; 


稍 后 将 会 安装 并 使 用 另 一 个 第 三 方 库 ， 安 装 和 导入 的 步 又 同上 。 
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它 ，Browserify 就 会 处 


所 以 添加 一 句 import 


就 像 在 CoffeeRun 中 一 样 , 创建 一 个 对 象 来 管理 DOM 里 的 表单 元 素 。 这 里 通过 ChatForm 类 来 





实现 。 使 用 ES6 的 类 会 让 代码 比 CoffeeRun 里 的 代码 可 读 性 更 强 一 些 。 








创建 一 个 ChatForm 实 例 和 初始 化 事件 处 理 程序 是 两 个 单独 的 步 又， 因为 构造 函数 的 职责 应 
该 仅仅 是 设置 实例 的 属性 ， 其 他 任务 〈 比如 添加 事件 监听 器 ) 应 该 在 别 的 方法 中 实现 。 
在 dom.js 中 定义 ChatForm, 它 的 构造 函数 接受 选择 右 参 数 。 在 这 个 构造 函数 中 ,为 实例 需要 











追踪 的 元 素 添加 属性 。 
import $ from 'jquery'; 


class ChatForm { 
constructor(formSel, inputSel) { 
this.$form = $(formSel); 
this.$input = $(inputSel); 
} 
} 


然后 ， 添 加 一 个 init 方 法 ， 为 表单 的 submit 事 件 关联 一 个 回调 函数 。 


class ChatForm { 
constructor(formSel, inputSel) { 
this.$form = $(formSel); 
this.$input = $(inputSel); 
} 


init(submitCallback) { 
this.s$form.submit((event) => { 
event .preventDefault(); 
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let val = this.s$input.val(); 
submitCallback(val); 
this. $input.val(''); 

}); 


this.$form.find('button').on('click', () => this.$form.submit()); 
} 
} 


init 方 法 中 的 提交 事件 处 理 程序 用 到 了 箭头 函数 。 该 箭头 函数 阻止 了 表单 默认 的 提交 行为 ， 
取得 表单 输入 框 的 值 并 将 其 传递 给 submitCaLLback， 最 终 重 置 输入 框 的 值 。 

为 确保 点 击 按钮 时 提交 表单 ， 添 加 一 个 点 击 事件 处 理 程序 ， 让 表单 触发 submit 事 件 。 为 实 
现 这 一 过 程 , 用 jQuery 获取 表单 元 素 ， 然 后 调用 jQuery 的 submit 方 法 。 这 里 用 到 了 箭头 函数 的 单 
个 表达 式 版 本 ， 可 以 省 掉 大 括号 。 

为 使 用 该 模块 ， 需 要 export ChatForm。 前 一 章 使 用 了 export default 来 实现 模块 导出 ， 
这 种 方式 允许 导出 模块 的 单个 值 。 在 某 些 情况 下 ， 还 可 以 在 单个 默认 值 里 使 用 一 个 简单 的 
JavaScript 对 象 来 封装 多 个 值 。 

本 章 将 使 用 命名 的 导出 (named export ) 方式 来 导出 多 个 命名 值 ， 而 不 是 导出 一 个 默认 值 。 

通过 在 class 声 明 前 面 添加 export 关 键 字 ， 导 出 ChatForm 类 。 当 用 户 使 用 该 模块 时 ， 便 可 
通过 类 名 访问 到 它 。 






































export class ChatForm { 
constructor(formSel, inputSel) { 
this.$form = $(formSel); 
this.$input = $(inputSel); 
} 


很 简单 吧 ! 现在 将 ChatForm 导 入 到 app.js 中 。 

你 在 Ottergram 和 CoffeeRun 中 使 用 了 var 关 键 字 来 表示 选择 器 字符 串 。 而 在 ES6 中 ， 可 以 通过 
声明 常量 来 实现 这 一 目的 ， 因 为 字符 串 的 值 不 会 改变 。 就 像 Let 一 样 ，const 也 是 块 级 作用 域 的 ， 
也 就 是 说 它 可 以 被 同 个 大 括号 里 的 任何 代码 访问 到 。 当 常量 位 于 所 有 大 括号 外 面 时 ( 就 像 这 里 的 
示例 一 样 )， 它 就 可 以 被 同 个 文件 里 的 任何 代码 访问 到 。 

在 appjs 中 导入 ChatForm 类 , 为 表单 选择 器 和 消息 输入 框 选 择 器 创建 常量 。 同 时 , 在 ChatApp 
的 构造 函数 中 创建 一 个 chatForm 的 实例 。 


import socket from './ws-client'; 
import {ChatForm} from './dom'; 






































const FORM SELECTOR = '[data-chat="chat-form"]'; 
const INPUT_SELECTOR = '[data-chat="message-input"]'; 


class ChatApp { 
constructor() { 
this.chatForm = new ChatForm(FORM SELECTOR, INPUT_SELECTOR); 
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Socket .init( 


'ws://localhost:3001'); 


socket.registerOpenHandler(() => { 
let message = new ChatMessage('pow!'); 
socket.sendMessage (message.serialize()); 


}); 


socket.registerMessageHandler((data) => { 


}); 
} 
} 


导入 ChatForm 时 
里 ChatForm 的 命名 的 
值 上 。 


console.log(data); 


， 用 大 括号 将 它 包 起 来 一 一 {ChatForm} 一 一 就 成 为 了 一 个 命名 的 导入 。 这 
导入 声明 了 一 个 本 地 变量 ChatForm， 并 将 其 绑 定 到 dom 模 块 中 同名 变量 的 














将 ChatForm 连 接 到 socket 


在 上 一 章 中 ， 你 发 送 了 一 条 模拟 消息 "pow!"。 现 在 可 以 通过 ChatForm 发 送 真 正 的 表单 数 


据 了 。 




















在 socket.register0penHandtLer 回 调 函 数 中 初始 化 ChatForm 的 实例 。 一 定 要 在 socket 连 接 
打开 之 后 初始 化 , 而 不 能 一 创建 实例 就 初始 化 。 这 种 等 待 能 避免 用 户 输入 了 聊天 消息 却 不 能 发 送 
到 服务 器 的 情况 。( 毕 竞 如 果 消 息 发 不 出 去 ， 用 户 体 验 会 很 糟糕 。) 

记得 要 给 ChatForm 的 init 方 法 传 一 个 回调 函数 ， 用 来 处 理 表单 的 提交 。 

在 app.js 中 删除 模拟 数据 , 改 成 调用 chatForm.init。 给 它 传 一 个 回调 函数 , 将 来 自 ChatForm 
的 消息 数据 发 给 socket。 


class ChatApp { 
































constructor() { 
this.chatForm = new ChatForm(FORM SELECTOR, INPUT SELECTOR); 


socket .init( 


‘ws://localhost:3001'); 


socket.registerOpenHandler(() => { 


this.chatForm.init((data) => { 
let message = new ChatMessage({message: data}); 
socket .sendMessage (message.serialize()); 


}); 
}); 


socket.registerMessageHandler((data) => { 
console.log(data); 


i 
} 
} 


再 来 看 看 ChatApp 都 做 了 些 什么 首先 , 它 打开 与 服务 端的 socket 连 接 。 连 接 打开 后 , ChatApp 
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初始 化 ChatForm 的 实例 ， 并 传 了 一 个 表单 提交 的 回调 函数 。 
现在 , 当 用 户 在 表单 提交 一 条 消息 时 ,ChatForm 实 例会 获取 消息 数据 ,并 将 其 发 送 给 ChatApp 
里 的 回调 函数 。 回 调 函 数 会 将 消息 打包 成 一 个 CchatMessage ， 并 发 送 给 WebSocket 服 务 右 。 


18.3 创建 ChatList 类 




















前 面 的 ChatForm 负 责 向 外 发 送 聊 天 消息 。 下 一 项 工作 是 在 服务 端 发 来 新 消息 时 ， 将 其 展示 
出 来 。 因 此 要 在 dom.js 中 创建 第 二 个 类 ， 用 来 向 用 户 展示 聊天 消息 列表 。 

ChatList 会 给 每 条 消息 创建 DOM 元 素 , 以 展示 发 送 该 消息 的 用 户 名 以 及 消息 内 容 。 在 dom.js 
中 ， 创 建 并 导出 类 ChatList 的 定义 来 实现 该 功能 : 


import $ from 'jquery'; 




















export class ChatForm { 
} 


export class ChatList { 
constructor(listSel, username) { 
this.$List = $(listSel); 
this.username = username; 
} 
} 














ChatList 接 受 属性 选择 器 和 用 户 名 作为 参数 ,属性 选择 器 用 于 决定 将 创建 的 消息 列表 元 素 添 
加 到 哪个 元 素 ， 用 户 名 用 于 区 分 发 送 消 息 的 是 当前 用 户 还 是 其 他 人 。( 当前 用 户 的 消息 和 别人 发 
送 的 消息 会 区 分 展示 。 ) 

现在 ChatList 已 经 具备 了 一 个 构造 函数 ， 它 还 需要 为 消息 创建 DOM 元 素 。 

给 ChatList 添 加 一 个 drawMessage 方 法 。 它 接受 一 个 对 象 参 数 ， 并 将 该 参数 解构 成 本 地 变 
量 ， 用 来 表示 用 户 名 、 时 间 戳 以 及 消息 内 容 。( 为 了 解释 解构 赋值 ， 下 面 的 例子 使 用 单字 符 的 本 
地 强 。) 


















































export class ChatList { 
constructor(listSel, username) { 
this.$List = $(listSel); 
this.username = username; 


} 


drawMessage({user: u, timestamp: t, message: m}) { 
let $messageRow = $('<li>', { 
'class': 'message-row' 


}); 


if (this.username === U) { 
$messageRow.addClass('me'); 
} 
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let $message = $('<p>'); 


$message.append($('<span>', { 
'class': 'message-username', 
text: u 


})); 


$message.append($('<span>', { 
'class': 'timestamp', 
'data-time': tt, 
text: (new Date(t)).getTime() 
})); 


$message.append($('<span>', { 
'class': 'message-message', 
text: m 


})); 


$messageRow.append ($message); 
this.s$list.append ($messageRow); 
$messageRow.get(0).scrollIntoView(); 
} 
} 























drawMessage 方 法 创建 一 行 消 息 ， 包 括 用 户 名 、 时 间 蕉 和 消息 内 容 本 身 。 假 如 当前 用 户 是 消 








息 的 发 送 者 ， 对 应 的 消息 元 素 会 有 一 个 额外 的 CSS 类 名 用 来 





ChatList 的 列表 元 素 中 ， 并 且 将 新 消息 行 深 动 到 可 视 区 域 。 





至 此 ，ChatList 已 经 完成 。 现 在 将 它 整合 到 ChatApp 中 。 


区 分 样式 。 然 后 将 消息 行 添 加 到 





在 app.js 中 更 新 dom 的 导 人 人 声明， 用 以 导入 ChatList。 添 加 一 个 const 用 来 表示 列表 选择 器 ， 


然后 在 构造 函数 中 实例 化 一 个 新 的 ChatList。 


import socket from './ws-client'; 
import {ChatForm, ChatList} from './dom’'; 





const FORM SELECTOR = '[data-chat="chat-form"]'; 
const INPUT SELECTOR = '[data-chat="message-input"]'; 
const LIST_SELECTOR = '[data-chat="message-list"]'; 


class ChatApp { 
constructor() { 
this.chatForm 





new ChatForm(FORM SELECTOR, INPUT SELECTOR); 


this.chatList = new ChatList(LIST SELECTOR, 'wonderwoman'); 


socket.init('ws://localhost:3001'); 























马上 就 能 完成 基本 的 聊天 功能 了 。 最 后 一 步 是 在 新 消息 到 达 时 调用 chatList.drawMessage 
进行 绘制 ， 这 一 步 在 app.js 里 的 registerMessageHandler 中 实现 。 
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class ChatApp { 


socket.registerMessageHandler((data) => { 
console.log(data); 
let message = new ChatMessage(data); 
this.chatList.drawMessage (message.serialize()); 


}); 
} 
} 


用 接收 的 数据 创建 一 个 新 的 CchatMessage， 然 后 对 消息 进行 序列 化 。 这 一 步 属 于 预防 措施 ， 
用 于 去 除数 据 里 可 能 存在 的 多 余 元 数据 。 根 据 socket 数 据 创 建 一 个 新 的 ChatMessage 用 以 提供 消 
息 ， 然 后 用 this.chatList.drawMessage 将 序列 化 之 后 的 消息 绘制 到 浏览 器 中 。 

现在 运行 一 下 代码 。 假 如 还 没有 编译 ， 启 动 Watchify (用 npm run watch ) 和 nodemon (用 
npm run dev )。 打 开 或 者 刷新 浏览 器 ， 输 入 消息 ( 如 图 18-2 所 示 )。 








eee DD Chattrbox x 








Me 


€ CC [| localhost:3000 A 


Chattrbox 


batman 1462471573552 
In Amazonia |'m a Doctor! 














图 18-2 看， 你 自己 的 聊天 消息 











太 棒 了 ! 现在 终于 有 一 个 真正 可 用 的 聊天 应 用 了 。 不 过 ， 还 需要 加 一 点 设计 元 素 润 色 一 番 。 


18.4 使 用 Gravatar 


Gravatar 是 一 个 可 用 于 关联 头像 和 邮箱 地 址 的 免费 服务 ， 它 通过 一 个 专门 格式 化 的 URL 提 供 
每 个 用 户 的 头像 。 比 如 ， 图 18-3 就 是 一 个 测试 账号 的 头像 。 


























© 9®@ ，(Dcs658c708ecd40a1d6798- x 


CC |) www.gravatar.com/avatar/c5658c708ecd40a1d6798cfla59a4cfb 了 7 


.Ad 


图 18-3 ”Gravatar 图 片 示例 
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看 到 URL 的 最 后 一 部 分 了 吗 ? 这 部 分 是 根据 用 户 邮 箱 地 址 生成 的 唯一 标识 。 这 个 标识 叫 作 哈 
希 (hash )， 用 第 三 方 库 crypto-js 很 容易 生成 。 

用 npm 将 crypto-js 添 加 到 项 目 中 : 

Add crypto-js to your project using npm: 





npm install --save-dev crypto-js 


crypto-js 现 在 已 经 安装 在 项 目 本 地 的 node modules 文 件 夹 下 ， 可 供 随时 使 用 。 

用 JavaScript 创 建 字符 串 时 , 经 常 需要 将 字符 串 与 其 他 值 进行 拼接 。 为 了 创建 包含 表达 式 和 变 
量 值 的 字符 串 ，ES6 提 供 了 更 好 的 方法 一 一 模板 字符 串 。 接 下 来 使 用 这 个 功能 创建 访问 Gravatar 
图 片 的 URL。 

在 dom.js 中 添加 另 一 个 import 声 明 , 导入 crypto-js 库 的 子 模块 md5, 使 用 /来 分 隔 主 模块 和 
子 模块 的 名 称 。 然后 , 写 一 个 createGravatarUrl 函 数 , 它 接受 一 个 用 户 名 , 用 来 生成 一 个 MD5 
的 哈 希 值 ， 并 返回 Gravatar 的 URL。 


import $ from 'jquery'; 
import md5 from 'crypto-js/md5'; 

















function createGravatarUrl (username) { 
Let userhash = md5 (username); 
return ‘http://www.gravatar.com/avatar/s${userhash.toString()}.; 


} 


注意 : 在 return `http://www.gravatar.com/avatar/${userhash.toString()}` 中 的 
符号 并 不 是 单 引号 ， 而 是 反 引 号 ， 大 多 数 美式 键盘 的 Escape 键 的 下 面 就 是 这 个 键 。 

在 反 引 号 里 使 用 ${fuserhash.toSstring()} 语 法 ,就 可 以 直接 在 字符 串 中 包含 JavaScript 表 达 
式 的 值 。 在 这 个 例子 的 表达 式 里 引用 了 变量 userhash 并 调用 了 它 的 toString 方 法 ， 实 际 上 ,大 
括号 中 可 以 包含 任何 表达 式 。 

接 下 来 , 使 用 这 个 函数 在 新 消息 中 展示 Gravatar。 在 ChatList 的 底部 , drawMessage 方 法 (还 
是 在 dom.js 中 ) 创建 了 一 个 新 的 图 片 元 素 ， 将 src 属 性 设置 成 用 户 的 Gravatar。 






































$message.append($('<span>', { 
class: 'message-message', 
text: m 

})); 


let $img = $('<img>', { 
src: createGravatarUrl(u), 
title: u 

}); 


$messageRow.append ($img); 
$messageRow.append( $message); 
this.$List.append($messageRow) ; 
$messageRow.get(0).scrollIntoView(); 


314 第 18 章 继续 ES6 探 索 之 旅 





运行 聊天 应 用 ， 这 次 看 到 出 现 了 一 个 Gravatar 头 像 (如 图 18-4 所 示 )。 


Oae D chattrbox 


所 GC 口 localhost:3000 


Chattrbox 





batman 1462470270261 
Great Heral 


图 18-4 ”显示 一 个 Gravatar 头 像 














很 遗憾 ，wonderwoman 这 个 用 户 名 并 没有 对 应 的 Gravatar 头 像 ， 所 以 只 能 看 到 一 个 长 相 平 平 
的 默认 Gravatar 头 像 。 


18.5 ”请 求 用 户 名 


尽管 成 为 神奇 女 侠 ( Wonder Woman ) 非常 酷 ， 但 是 成 为 一 个 使 用 Chattrbox 的 JavaScript 开 发 
者 更 酷 。( 而 且 真 实用 户 真 的 拥有 Gravatar 头 像 。) 为 了 知道 谁 在 用 Chattrbox ， 需 要 请 求 用 户 输入 
他 们 的 用 户 名 。 

这 一 功能 需要 dom 模 块 与 UI 进行 交互 ， 因 此 在 dom.js 中 创建 一 个 promptForUsername 也 数 ， 
将 其 添加 到 export， 而 不 是 作为 ChatForm 或 者 ChatList 的 一 部 分 。 















































function createGravatarUrl(username) { 
let userhash = md5 (username); 
return ‘http://www.gravatar.com/avatar/${userhash.toString()}; 


} 


export function promptForUsername() { 
let username = prompt('Enter a username'); 
return username.toLowerCase(); 


} 





在 promptForUsername 函 数 中 创建 一 个 Let 变 量 ， 用 以 保存 用 户 输入 的 文字 。( prompt 浮 数 
是 浏览 器 内 置 的 ， 它 会 返回 一 个 字符 串 。) 然后 返回 转换 成 小 写 格 式 的 文字 。 

接 下 来 更 新 app.js， 在 其 中 使 用 刚 添加 的 函数 。 更 新 dom 模 块 的 Import 声明 ， 调 用 
promptForUsername 困 数 ， 获 取 username 变 量 的 值 : 


import socket from './ws-client'; 
import {ChatForm, ChatList, promptForUsername} from './dom'; 











const FORM SELECTOR = '[data-chat="chat-form"]'; 


18.5 请 求 用 户 名 ”315 





const INPUT_SELECTOR = '[data-chat="message-input"]'; 
const LIST SELECTOR = '[data-chat="message-list"]'; 


let username = "'; 
username = promptForUsername(); 


class ChatApp { 


现在 更 新 CnatMessage， 使 用 刚才 拿 到 的 用 户 名 作为 默认 用 户 名 。 记 住 ， 只 有 从 服务 端 取得 


的 消息 才 有 data.user 值 。 


class ChatMessage { 
constructor({ 
message: m, 
user: u=-batman’, Username， 
timestamp: t=(new Date()).getTime() 


最 后 将 用 户 名 传 给 ChatList 构 造 函 数 : 


class ChatApp { 
constructor() { 
this.chatForm 


new ChatForm(FORM SELECTOR, INPUT SELECTOR); 


this.chatList = new ChatList(LIST SELECTOR, ‘wonderwoman” username); 





localhost:3000 says: 


Enter a username 


构建 完毕 后 ， 刷 新 浏览 器 ， 在 请 求 输入 框 中 输入 用 户 名 〈 如 图 18-5 所 示 )。 


diana.prince@bignerdranch.com| 


图 18-5 “请求 














用 


户 名 





现在 尝试 发 送 消 息 , 可 以 看 到 之 前 挑选 的 用 户 名 会 被 服务 端 返回 , 同时 返回 的 还 有 与 之 关联 


的 Gravatar 头 像 (如 图 18-6 所 示 )。 





Gravatar 头 像 是 通过 邮箱 地 址 关联 的 。 假 如 你 的 邮箱 地 址 没有 关联 头像 ， 试 试 diana.prince@ 


bignerdranch.com 或 者 clark.kent@bignerdranch.com。 
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@e@e DD chattrbox x 


€ CG [| localhost:3000 


Chattrbox 





diana.prince@bignerdranch.com 1462471868290 
Merciful Minerval 





diana.prince@bignerdranch.com 1462471873420 
Athena's Shield! 














图 18-6 ”用 户 名 


18.6 ”使 用 会 话 存 储 


每 次 刷新 页 面 都 要 输入 用 户 名 实在 是 太 麻烦 了 ， 要 是 能 将 用 户 名 存储 在 浏览 器 就 会 好 很 多 。 
为 了 实现 简单 的 存储 ,浏览 器 提供 了 两 个 API 用 来 存储 键 值 对 ( 有 一 个 限制 一 一 值 必须 是 字符 串 )。 
这 两 个 API 是 LocaLStorage 和 sessionStorage。 在 LocalStorage 和 sessionStorage 中 存储 的 
数据 与 Web 应 用 服务 器 地 址 相关 联 。 不 同 网 站 的 代码 无 法 访问 彼此 的 数据 。 

使 用 LocalStorage 没 问题 ,但 是 你 可 能 只 想 将 用 户 名 保存 到 关闭 浏览 器 的 标签 或 者 窗 为 
止 。 在 这 种 情况 下 ， 就 要 用 sessionStorage API 了 。 它 跟 tocaLStorage 很 像 ， 但 是 在 浏览 
会 话 结束 时 数据 会 被 清除 (不管 是 关闭 浏览 器 的 标签 还 是 窗口 )。 

接 下 来 创建 一 系列 新 的 类 来 管理 sessionStorage 信 息 。 

在 app/scripts/src 文 件 夹 下 新 建 一 个 storage.js 文 件 ， 并 定义 一 个 新 的 类 : 


class Store { 
constructor(storageApi) { 
this.api = storageApi; 












































} 
get() { 

return this.api.getItem(this.key); 
} 


set(value) { 
this.api.setItem(this.key, value); 
} 
} 


新 的 Store 类 是 通用 类 ， 它 既 可 以 搭配 LocaLStorage 使 用 ， 也 可 以 搭配 sessionStorage 使 用 。 
它 只 是 简单 地 封装 了 一 下 Web StorageAPI。 在 实例 化 这 个 类 的 时 候 ， 可 以 指定 使 用 哪个 Storage API。 
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注意 , 没有 在 构造 函数 中 设置 对 this.key 的 引用 , 因为 Store 类 并 不 需要 给 自己 提供 存储 的 
数据 。 相 反 ， 它 用 来 创建 定义 key 属 性 的 子 类 。 
使 用 extends 关 键 字 创建 一 个 子 类 ， 用 于 在 sessionStorage 中 保存 用 户 名 : 


class Store { 
constructor(storageApi) { 
this.api = storageApi; 
} 
get() { 
return this.api.getIitem(this.key); 
} 














set(value) { 
this.api.setItem(this.key, value); 


} 
} 


export class UserStore extends Store { 
constructor(key) { 
super (sessionStorage); 
this.key = key; 
} 
} 


UserStore 只 定义 了 一 个 构造 也 数 , 它 执 行 两 个 操作 。 首先, 调用 super, 这 一 步 会 调用 Store 
的 构造 函数 ， 并 传人 一 个 对 sessionStorage 的 引用 。 然 后 ， 给 this .key 设 置 一 个 值 。 

现在 Store 类 的 api 的 值 已 经 设置 好 了 ,UserStore 实 例 的 key 的 值 也 设置 好 了 。 所 有 代码 已 
经 准备 就 绪 ，UserStore 实 例 可 以 调用 get 和 set 方 法 了 。 

app.js 将 会 用 到 UserStore， 所 以 需要 把 它 导 出 。 

现在 来 使 用 新 的 UserStore。 将 UserStore 导 入 到 app.js 中 , 创建 一 个 实例 , 用 这 个 实例 来 存 
储 用 户 名 : 

import socket from './ws-client'; 


import {UserStore} from './storage'; 
import {ChatForm, ChatList, promptForUsername} from './dom'; 

















const FORM SELECTOR = '[data-chat="chat-form"]'; 
const INPUT SELECTOR = '[data-chat="message-input"]'; 
const LIST SELECTOR = '[data-chat="message-list"]'; 


Let userStore = new UserStore('x-chattrbox/u'); 
Let username = userStore.get(); 
if (!username) { 
username = promptForUsername() 
userStore.set(username); 


} 


class ChatApp { 
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再 次 在 浏览 器 中 运行 Chattrbox。 这 一 次 ,只 需要 在 初次 加 载 页面 的 时 候 提交 用 户 名 了 , 之 后 
刷新 都 会 用 第 一 次 输入 的 用 户 名 。 

为 了 确保 用 户 名 已 经 存储 到 sessionStorage 中 ,使 用 开发 者 工具 里 的 Resources 面 板 。 点 击 
Resources 面 板 后 ， 会 看 到 左边 有 一 个 列表 。 在 列表 中 点 击 Session Storage 左 边 的 三 角形 > ， 就 会 
展开 显示 http://localhost:3000。 点 击 这 个 URL， 就 能 看 到 UserStore 存 储 的 数据 ( 如 图 18-7 所 示 )。 





[x 上 | Elements Console Sources Network Timeline Profies Resources Security Audits x 





CE Key Value 
Application 


x-chattrbox/u | diana.prince@bignerdranch.com 





叶 Service Workers 
Manifest 


Storage 








p> 国 Local Storage 











了 轩 Session Storage 

国 http://localhost:3000 
目 IndexedDB 

由 web sQL 


* 国 cookies © x 























图 18-7 开发 者 工具 里 的 Resources 面 板 


在 右 侧 键 值 对 列表 的 底部 有 两 个 按钮 ,可 以 分 别 用 来 刷新 列表 和 删除 列表 中 的 元 素 。 假如 你 
想 手 动 修改 存储 的 数据 ， 可 以 使 用 这 两 个 按钮 。 


18.7 ”格式 化 和 更 新 消息 时 间 戳 


现在 的 消息 时 间 戳 对 用 户 来 说 并 不 友好 。( 讲 真 的 ， 谁 会 用 从 1970 年 1 月 1 日 开始 的 毫秒 数 来 
表示 时 间 ? ) 为 了 提供 更 友好 的 时 间 戳 ( 比如 “10 分 钟 之 前 ”)， 需 要 增加 一 个 叫 作 moment 的 模块 。 
用 npm 安 装 这 个 模块 ， 将 其 保存 为 开发 环境 下 的 依赖 包 。 

npm install --save-dev moment 

每 条 消息 都 将 时 间 蕉 存储 成 了 数据 属性 。 为 ChatList 写 一 个 init 方 法 ， 用 来 调用 内 置 函数 
setIntervaL。 这 个 函数 接受 两 个 参数 : 要 运行 的 函数 ， 和 这 个 函数 多 久 运 行 一 次 。 这 个 函数 将 
会 更 新 每 条 消息 ， 将 时 间 戳 转换 成 用 户 可 读 的 格式 。 

为 了 设置 时 间 戳 字符 串 ， 在 dom.js 里 用 jQuery 查找 所 有 带 有 data-time 属 性 的 元 素 ， 这 个 
属性 的 值 都 是 数字 化 的 时 间 戳 。 使 用 这 个 数字 化 的 时 间 戳 创建 一 个 新 的 Date 对 象 , 将 该 对 象 传 
给 moment。 然 后 调用 fromNow 方 法 处 理 最 终 的 时 间 惟 字符 串 ， 并 将 结果 字符 串 设 为 元 素 的 
HTMIL 文本。 




















18.7_” 格 式 化 和 更 新 消息 时 间 蕉 319 





import moment from "moment ' ; 
drawMessage({fuser: u, timestamp: t, message: m}) { 
} 


init() { 
this.timer = setInterval(() => { 
$('[data-time]').each((idx, element) => { 
let $element = $(element); 
Let timestamp = new Date().setTime($element.attr('data-time')); 
Let ago = moment(timestamp).fromNow(); 
$eLement .htmL(ago) ; 
}); 
}, 1000); 
} 
} 


这 个 函数 会 每 1000 片 秒 执行 一 次 。 为 了 保证 用 户 可 以 马上 看 到 一 个 可 读 的 时 间 蕉 ， 更 新 
drawMessage。 在 初次 将 消息 绘制 到 聊天 列表 时 ， 使 用 moment 创 建 一 个 格式 化 的 时 间 戳 字符 串 。 












































drawMessage({fuser: u, timestamp: t, message: m}) { 
$message.append($('<span>', { 
'class': 'timestamp', 
'data-time': t, 
text: moment(t) .fromNow() 


})); 


最 后 更 新 appjs， 在 socket . register0penHandtLer 的 回调 函数 中 调用 this.chatList. init: 





class ChatApp { 
constructor () { 
this.chatForm 
this.chatList 


= new ChatForm(FORM SELECTOR, INPUT SELECTOR); 
= new ChatList(LIST SELECTOR, username); 
socket.init('ws://localhost:3001'); 
socket.registerOpenHandler(() => { 
this.chatForm.init((text) => { 
let message = new ChatMessage({message: text}); 
socket.sendMessage (message.serialize()); 
}); 
this.chatList.init(); 
}); 








保存 代码 ， 让 npm 脚 本 去 编译 所 有 改动 。 刷 新 浏览 器 ， 开 始 聊天 。 你 会 看 到 消息 文本 使 用 了 
新 的 时 间 戳 格式 。 几 分 钟 后 ， 还 能 看 到 消息 时 间 惟 更 新 了 《如 图 18-8 所 示 )。 
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€ @ | 1 localhost:3000 





Chattrbox 


lunch? 


diana.prince@bignerdranch.com 5 minutes ago 


k. tacos? 


diana.prince@bignerdranch.com 2 minutes ago 


clark.kent@bignerdranch.com 5 minutes ago 


one sec, finishing a code review 


, 
导 、 
jn 


clark.kent@bignerdranch.com 4 minutes ago 





totes. let's do elmyriachi. ) 
NA 4 前 
> 
全 clark.kent@bignerdranch.com a minute ago 
息 yesl patiooooooooool 
| | Gol 





图 18-8 不 是 很 私密 的 标识 


Chattrbox 项 目 已 经 开发 完毕 。 尽 管 只 用 了 几 章 , 但 是 确实 收获 了 一 些 令 人 兴奋 的 成 果 。 你 学 
会 了 用 Node.js 写 两 种 服务 器 : 一 个 基础 的 Web 服 务 器 和 一 个 WebSocket 服 务 器 。 你 还 用 ES6 构 建 了 


客户 端 应 用 程序 ， 利 用 Babel 和 Browserify 将 代码 编译 成 ES5， 从 而 在 较 | 





日 的 浏览 器 中 使 用 





Chattrbox。 而 且 你 还 用 npm 脚 本 实现 了 工作 流 的 自动 化 。 





Chattrbox 是 你 目前 所 学 的 技术 匮 峰 。 在 下 一 个 项 目 Tracker 中 ， 将 会 介绍 Emberjs 











来 构建 大 型 应 用 的 框架 。 


18.8 


一 个 用 





它 将 基于 你 所 学 的 模块 化 、 异 步 编程 和 工作 流 工具 的 知识 进行 构建 。 


初级 挑战 : 给 消息 添加 特效 


给 新 消息 添加 一 个 特效 ,比如 让 消息 浙 入 或 者 划 入 。( 阅读 jQuery 的 Effects 文 档 来 挑选 特效 。) 


再 增加 一 点 难度 : 只 将 特效 加 到 真正 的 新 消 ， 


给 之 前 已 经 加 载 过 的 聊天 消息 加 特效 。 




















如 何 辨别 消息 是 新 的 还 是 旧 的 ? 每 个 消息 都 有 一 个 数据 


消息 是 否 已 经 超过 了 1~2 秒 。 
中 级 挑战 : 缓存 消息 


将 websockets-serverjs 中 的 这 几 行 注释 掉 : 


18.9 





息 上 。 当 用 户 初 次 访问 或 者 刷新 浏览 器 时 ,不 要 





属性 一 一 时 间 戳 , 它 可 以 告诉 我 们 该 
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messages.forEach(function (msg) { 
socket.send(msg); 
}); 


那么 ,在 聊天 过 程 中 刷新 浏览 器 , 所 有 消息 都 会 消失 。 之 前 用 UserStore 记 住 了 用 户 名 一 一 要 
是 聊天 消息 也 能 像 用 户 名 一 样 被 记 住 就 更 好 了 。 

创建 一 个 MessageStore 作 为 Store 的 子 类 。 每 当 消 息 到 达 时 ， 它 就 存储 消息 ， 并 且 保 证 不 
会 重复 存储 同一 条 消息 。 

页 面 加 载 后 ，Chattrbox 应 该 能 从 MessageStore 中 得 到 任何 缓存 过 的 消息 。 请 自己 决定 是 否 
要 在 关闭 浏览 器 标签 或 者 重启 浏览 器 之 后 仍然 保存 消息 缓存 。( 如 果 是 ， 应 该 用 什么 来 奉 代 


sessionStorage 呢 ? ) 


18.10 ”高 级 挑战 ， 独立 的 聊天 室 


这 项 挑战 需要 修改 服务 端 和 客户 端的 应 用 程序 。 
为 用 户 添 加 单独 的 聊天 室 。 当 用 户 输入 用 户 名 后 ， 请 求 用 户 输入 他 们 喜欢 的 聊天 室 的 名 称 。 
当 用 户 登 录 到 一 个 聊天 室 , 通过 WebSocket 连 接 , 他 们 只 应 该 收 到 来 自 这 一 个 聊天 室 的 消息 。 

你 可 能 需要 改变 消息 在 服务 器 上 存储 的 方式 ,或 者 消息 发 送 到 客户 端的 方式 ,或 者 两 者 都 要 修改 。 

再 加 大 点 难度 : 在 客户 端 UI 显 示 一 个 下 拉 框 ， 以 便 用 户 能 切换 聊天 室 。 当 切换 到 另 一 个 聊天 

室 时 ， 确 保 用 户 能 从 服务 端 收 到 新 消息 并 将 其 展示 到 聊天 列表 中 。 


















































第 四 部 分 


应 用 歼 构 


初 识 MVC 和 Ember 











模型 -视图 -控制 器 (Model-View-Controlletr，MVC ) 是 一 种 非常 有 用 的 软件 设计 模式 。 在 进 
行 Web 应 用 开发 时 ， 可 以 使 用 MVC 模 式 分 层 实现 程序 结构 。 本 章 会 详细 介绍 MVC 模 式 ， 此 外 还 
会 介绍 如 何 安装 和 设置 基于 MVC 模 式 的 框架 Ember。 之 后 几 章 将 会 分 别 关 注 MVC 的 每 一 层 ， 逐 
层 完 成 一 款 完整 应 用 的 开发 。 

业界 对 MVC 模 式 有 多 种 解读 方式 ,在 前 端 领域 更 是 如 此 。 图 19-1 展 示 了 我 们 选用 的 解读 方式 。 





触发 数据 改变 

















提供 新 数据 调用 处 理 程序 函数 





图 19-1 MVC 模 式 


各 层 功能 大 致 如 下 所 示 。 

口 模型 负责 管理 数据 。 当 数据 发 生 改 变 时 ， 模 型 会 通知 所 有 监听 者 。 

口 视图 负责 管理 用 户 界面 。 视 图 的 功能 是 泻 染 模型 中 的 数据 ， 同 时 监听 数据 变化 。 此 外 ， 

它 还 会 在 用 户 触发 UI 事 件 时 调用 控制 器 中 的 处 理 程序 函数 。 

口 控制 器 负责 应 用 程序 逻辑 。 它 将 查询 到 的 模型 实例 传递 给 视图 。 必 外 ， 控 制 锅 中 还 包含 
UI 事件 的 处 理 程序 函数 ， 这 些 函 数 可 以 对 模型 实例 进行 变更 。 

这 三 部 分 分 工 合作 , 形成 环 状 结构 : 应 用 数据 从 模型 流向 视图 进行 泻 染 ， 
































hl 





件数 据 从 视图 流 
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回 控制 姻 ， 控 制 右 则 根据 UI 事件 对 数据 进行 修改 。 











你 也 许 想 知道 如 何 走 进 MVC 的 大 门 。 在 第 8 章 中 , 我 们 创建 了 CoffeeRun。 当 时 ,我们 将 用 到 
的 所 有 模块 都 按 各 自 的 功能 进行 命名 ， 然 后 将 模块 添加 到 Window.App 对 象 中 。 如 果 换 成 MVC 模 








式 ， 则 首先 需要 一 个 初始 化 方法 ， 类 似 于 新 建 一 个 Truck 实例 ， 然 后 在 其 中 依次 加 载 所 有 的 控制 
器 、 模 型 和 视图 。 





从 本 章 开 始 ， 我 们 将 开发 一 款 名 叫 Tracker 的 新 应 用 。 这 个 应 月 





会 以 空 <body> 标 签 的 形式 在 


HTML 文 件 中 加 载 DOM 的 初始 状态 , 此 外 还 会 加 载 一 个 用 于 初始 化 应 用 的 脚本 文件 。 应 用 会 根据 
当前 路 由 路 径 和 数据 状态 〈 模 型 ) 动态 泻 染 视 图 ( HTML 内容 )。 

在 CoffeeRun 应 用 中 , 我 们 共 创 建 了 7 个 模块 , 而 这 次 会 创建 更 多 。 在 MVC 模 式 统一 的 组 织 架构 下 ， 
以 将 所 有 的 模块 按 功能 分 割 成 独立 的 文件 ， 这 样 即便 有 成 百 上 于 个 模块 也 能 得 到 很 好 的 管理 。 


可 
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Tracker 应 用 会 包含 Web 应 用 中 最 棒 的 功能 之 一 : URL 路 由 。Tracker 还 会 包含 : 
、 处 理 用 户 动作 的 控制 器 、 定 义 UI 的 模板 ， 还 有 将 模型 传递 给 模板 的 路 
能 掌握 一 些 新 的 模式 和 技术 ， 它 们 能 让 代码 更 加 精练 和 优雅 
Tracker 的 目标 客户 是 一 群 “ 神 秘 生 物 研 究 者 ”， 他 们 环 游 世界 ， 
卓 柏 卡 布 拉 (一 种 被 怀疑 存在 于 美沙 


型 


还 








Tracker 














的 吸血 动物 )、 尼 时 





定义 数据 的 模 
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。 在 开发 的 过 程 中 ， 

















追寻 各 种 神秘 生物 ， 如 野人 、 





湖水 怪 、 独 角 兽 等 。 他 们 需要 一 个 应 用 





来 跟踪 这 些 神秘 生物 并 对 生物 的 目击 记录 进行 收集 。 具 体 来 说 ， 目 前 的 需求 是 下 面 这 些 功 能 点 ， 


当然 这 些 需 求 有 可 能 会 发 生变 更 〈 并 且 经 常 变更 )。 


































































































口 展示 所 有 目击 记录 。 
口 添加 新 目击 记录 。 
口 将 生物 与 目击 记录 关联 。 
口 通过 提示 消息 查看 最 新 一 条 目击 记录 。 
每 个 目击 记录 模型 均 包 含 如 下 属性 。 
目击 记录 模型 属性 属性 类 型 
出 现 的 日 期 date 对 象 
出 现 的 地 点 字符 串 
神秘 生物 神秘 生物 主键 
击 击 者 主键 组 成 的 数组 
每 个 神秘 生物 模型 均 包 含 如 下 属性 。 
神秘 生物 模型 属性 属性 类 型 
名 称 字符 串 
类 型 字符 串 
照片 路 径 字符 串 
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每 个 目击 者 模型 均 包 含 如 下 属性 。 



































目击 者 模型 属性 属性 类 型 
名 字符 串 
姓 字符 串 
姓名 字符 串 : 包含 姓 和 名 
FE 箱 字符 串 
击 记录 目击 记录 表 主键 组 成 的 数组 

















与 开发 前 面 的 几 款 应 用 不 同 ， 这 一 次 开发 Tracker 的 过 程 会 尽量 接近 真实 环境 中 的 应 用 开发 ， 
这 也 就 意味 着 每 一 节 中 的 代码 会 增多 ,而 相应 的 提示 和 说 明 会 减少 。 和 希望 你 能 从 中 获得 更 加 真实 
的 应 用 开发 体验 ， 而 且 能 开发 出 一 款 令 自己 满意 的 复杂 应 用 ( 如 图 19-2 扬 * )。 











©900 Orcker x 3 
€ GD localhost:4200/sightings a 
Tracker Sightings Cryptids Witnesses [R 0 | Elements Console Sources Network » x 
@ tp v Preserve log 
Er ee I Regex © Hide network messages 
[A Errors Warnings Info Logs Debug Handled 
DEBUG: 一 -一 -一 一 一 一 一 -一 一 一 一 一 一 一 ember. debug, is:6395 
Sightings DEBUG: Ember : 2.4.4 ember. debug. is:6395 
g g DEBUG: Ember Data ; 2.4.3 ember. debug. jis:6395 
DEBUG: jQuery : 2.2.3 ember. debug. is:6395 
DEBUG: 一 一 一 一 一 -一 -一 一 ember.debug,js:6395 





Aaron Harry 
Atlanta, Calloway 
GA Gardens, 
35 minutes ago GA 





图 19-2 ”完成 后 的 Tracker 应 用 














19.2” Ember: 一 款 MVC 框架 


Ember 是 一 球 非常 优秀 的 MVC 框 架 , 我 们 将 在 开发 Tracker 的 过 程 中 逐步 学 习 如 何 使 用 它 。 为 
了 使 开发 更 加 方便 迅速 ，Ember 规 定 了 一 些 概 念 和 命名 习惯 ， 在 后 面 的 开发 过 程 中 会 一 一 介绍 。 

Ember 的 官网 (emberjs.com ) 上 描述 说 ，Ember 是 “一 款 为 构建 伟大 的 Web 应 用 而 生 的 框架 ”。 
与 jQuery 等 库 不 同 ，Ember 这 种 类 型 的 框架 通常 对 项 目 结 构 有 一 定 的 要 求 ， 而 且 为 了 快速 生成 符 
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合 结构 的 文件 , 它们 多 会 提供 脚手架 工具 一 一 一 些 用 于 建立 目录 和 生成 样板 文件 的 辅助 脚本 。 为 
了 进一步 提升 开发 者 的 效率 ，Ember 社 区 从 2011 年 就 开始 着 手 建立 一 个 丰富 的 生态 系统 ， 其 中 包 
含 了 各 种 库 和 工具 。 

Ember 的 学 习 之 旅 将 从 Ember CLI 开 始 , 它 就 是 Ember 提 供 的 脚手架 工具 , 包含 了 开发 、 测 试 、 
构建 等 各 个 环节 需要 的 功能 。 有 些 人 可 能 不 认识 CLI, 它 是 Command-Line Interface ( 命令 行 接口 ) 
的 缩写 。 在 后 面 的 开发 过 程 中 会 借助 Ember CLI 来 新 建 项 目 、 加 载 依赖 包 、 生 成 Ember 对 象 、 构 
建 工 程 、 运 行 应 用 等 。 





















































19.2.1 安装 Ember 


在 正式 开始 之 前 ， 需 要 安装 一 些 工 具 。 

首先 , 确保 Node.js 是 最 新 版 本 ( 版 本 号 高 于 0.12.0 ) 可 以 通过 node - -version 命 令 查看 
版 本 号 。 在 编写 本 书 时 ，Node.js 的 最 新 版 本 是 5.5.0。”( 5.5.0 与 0.12.0 在 数值 上 相距 甚 远 ， 两 个 版 
本 在 功能 上 也 有 巨大 差别 。 如 果 你 想 了 解 Nodejs 的 版 本 号 从 0.12.0 直 接 跳 到 4.0.0 的 原因 以 及 背景 ， 
可 以 查看 维基 百科 上 的 文章 : en.wikipedia.org/wiki/Node.js。) 

如 果 版 本 过 旧 ， 请 从 nodejs.org 网 站 上 下 载 安 装 新 版 的 Node,js。 

准备 好 Node.js 后 ， 就 可 以 安装 Ember CLI 了 ， 在 终端 输入 : 

npm install -g ember-cli@2.4 



























































安装 需要 花费 一 些 时 间 。? 如 果 看 到 PLease try running this command again as root/ 
Administrator 的 错误 提示 ， 则 表明 当前 用 户 权限 不 足 。 这 时 请 不 要 直接 在 命令 前 添加 sudo ， 因 为 
npm 和 sudo 一 起 使 用 可 能 会 带 来 一 些 问题 。 这 时 可 以 执行 命令 sudo chown -R $USER/Vus r/Local， 
然后 重新 执行 安装 命令 (不 带 sudo )。 

在 安装 过 程 中 还 可 能 遇 到 包 与 当前 系统 不 兼容 等 错误 ， 不 过 大 部 分 错误 的 错误 提示 中 都 包 
含 了 修正 方法 。 如 果 仍 然 无 法 解决 ， 则 可 以 通过 搜索 引擎 求助 ， 有 可 能 需要 更 新 一 些 现 有 的 程 
序 。 此 外 ，Ember CLI 也 整理 了 一 份 常 见 问题 列表 ， 可 以 访问 ember-cli.com/user-guide/# 
commonissiues 查 看 。 

接 下 来 安装 Bower， 它 也 是 一 个 资源 管理 工具 。 

npm install -g bower 

Bower 和 npm 都 是 创建 Ember 应 用 所 必需 的 。 

接 下 来 在 Chrome 里 安装 Ember Inspector 插 件 。 打 开 Chrome ， 在 地 址 栏 输入 
chrome://extensions/， 点 击 页 面 底部 的 Get more extensions。 在 打开 的 页 面 中 通过 搜索 找到 “Ember 
Inspector”( 如 图 19-3 所 示 )， 点 击 Add to Chrome ， 然 后 根据 提示 完成 安装 。 

































































Q@ 翻译 此 书 时 ，Node.js 版 本 已 经 更 新 到 了 7.0.0。 一 一 译 者 注 
@ 在 国内 从 npm 下 载 包 时 ， 某 些 情况 下 可 能 会 出 现 速 度 极 慢 或 连接 超时 出 错 的 情况 ， 此 时 可 以 使 用 淘宝 提供 的 npm 
镜像 ， 详 情 访 问 : npm.taobao.org。 一 一 译 者 注 
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@e@ee 大 Extensions 2 后 Ember Inspector - Chrome x 


所 C | https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en-US Yo 











二, Ember Inspector + orocmov [< 加 


| 雄 丰 女友 碎 (208) Developer Tools 
OVERVIEW REVIEWS RELATED 8+1 1, 101 


一 一 Toolfor debugging Ember 


applications. 

Take the dog for a walk. The Ember Inspector is a plug-in for the 
Chrome developer tools that makes 

Write article on Ember-Extension. understanding and debugging your Emberjs 


application a snap. 


After installing this extension, you'll be able 
to easily: 





图 19-3 ”在 Chrome 里 安装 Ember Inspector 捕 件 





Ember CLI 在 运行 过 程 中 需要 用 到 Watchman。Watchman 是 一 款 命 令 行 工 具 , 它 通过 与 浏览 器 
通信 ， 实 现 了 无 须 手 动 刷新 ， 即 可 实时 更 新 页 面 。 

如 果 你 用 的 是 Mac 电 脑 , 那么 可 以 通过 Homebrew 安 装 Watchman。Homebrew 是 OSX 中 的 一 个 
软件 管理 工具 ， 安 装 方法 十 分 简单 ， 只 需要 从 brew.sh 网 站 复制 命令 然后 在 终端 执行 即 可 。 
Homebrew 安 装 完 成 后 ， 就 可 以 使 用 下 面 的 命令 安装 Watchman (3.0.0 版 及 以 上 ) 了 : 

brew install watchman 

如 果 你 的 系统 是 Windows， 那 么 请 从 这 里 查看 安装 方法 : facebook.github.io/watchman/docs/ 
install.html。 

至 此 ， 正 式 开 工 前 的 所 有 准备 工作 已 经 全 部 完成 了 。 


























19.2.2 ”创建 Ember 应 用 


通过 Ember 提 供 的 交互 式 向 导 , 用 寥寥 几 行 代码 就 可 以 创建 一 个 应 用 。 在 应 用 启动 时 , Ember 
框架 会 在 幕后 做 许多 工作 , 生成 一 系列 对 象 和 事件 。 在 后 面 的 开发 中 , 我 们 会 逐渐 用 自己 创建 的 
对 象 替换 Ember 自 动 生成 的 对 象 。 

在 执行 Ember 的 ember new [project name] 命 令 时 ， 会 创建 一 个 新 文件 夹 ， 并 在 其 中 生成 
项 目 开始 时 所 必需 的 文件 。 

创建 一 个 名 叫 Tracker 的 Ember 应 用 。 打 开 终 端 ， 切 换 到 项 目 目录 ， 然 后 执行 : 


ember new tracker 


创建 Ember 应 用 需要 花费 一 些 时 间 。 从 终端 显示 的 信息 中 可 以 看 到 ，ember _ new 命令 创建 了 
基本 的 目录 结构 和 一 些 项 目 文件 。 此 外 ，Ember 还 通过 npm 和 Bower 加 载 了 一 些 外 部 库 , 这 些 库 是 
Ember 应 用 运行 和 Ember 服 务 需 在 执行 编译 、 构 建 、 测 试 等 操作 时 所 必需 的 。 























19.2 Ember: 一 款 MVC 框 架 “329 





installing app 
create .bowerrc 
create .editorconfig 
Create .ember-cli 
create .jshintrc 
Create .travis.yml 
create .watchmanconfig 
create README .md 
create app/app.js 
create app/components/.gitkeep 
create app/controllers/.gitkeep 
create app/helpers/.gitkeep 
create app/index.html 
create app/models/.gitkeep 
create app/router.js 
create app/routes/.gitkeep 
create app/styles/app.css 
create app/templates/application.hbs 


Successfully initialized git. 
Installed packages for tooling via npm. 
Installed browser packages via Bower. 























创建 过 程 完成 之 后 ， 局 动 本 地 服务 需 ， 检 查 一 下 Tracker 应 用 是 否 正 澡 运行 。 





19.2.3 ”启动 服务 器 
接 下 来 执行 ember server (可 以 简写 为 ember s ) 命令 ， 用 来 编 

















译 项 目 并 启动 一 个 可 以 从 


本 地 访问 的 服务 器 。ember server 提 供 了 一 项 非常 方便 的 功能 : 它 会 持续 监控 本 地 文件 ， 当 发 
现 文件 改动 时 自动 进行 重新 编译 、 重 启 服务 器 等 操作 , 这样 在 浏览 器 里 看 到 的 永远 是 最 新 的 代码 



































( 它 的 功能 类 似 于 在 Ottergram 和 CoffeeRun 中 用 过 的 browser-sync )。 





























Ember CLI 使 用 Broccoli 进 行 编 译 。JavaScript 中 的 “编译 ”和 Java、Objective-C 等 语言 中 的 “编译 ” 
可 能 有 所 不 同 , 前 者 是 指 通 过 分 析 JavaScript 文 件 的 依赖 关系 , 将 运行 应 用 所 需要 的 全 部 文件 合并 

















到 一 起 ， 此 外 还 会 加 载 所 有 的 依赖 。 























接 下 来 就 要 “为 用 户 而 战 * 了 。 请 切换 到 Tracker 项 目的 目录 ， 然 后 启动 服务 器 : 


cd tracker 
ember server 


打开 Chrome， 新 建 一 个 标签 访问 http://localhost:4200， 就 能 看 到 刚才 创建 的 应 用 。 接 着 打开 
开发 者 工具 ， 切 换 到 Ember 标 签 页 ， 能 看 到 前 面 安装 的 调试 工具 ( 如 图 19-4 所 示 )。 
前 面 提 到 过 ，Ember CLI 会 在 检测 到 文件 变化 时 自动 刷新 浏览 器 的 页 面 ， 这 个 功能 叫 作 实 时 





加 载 (Livereload )， 在 终端 中 也 能 看 到 相关 的 提示 : 


Livereload server on http://localhost:49152 


如 图 19-4 所 示 ， 在 控制 台 和 Ember Inspector 中 都 列 出 了 生成 的 组 件 和 它们 的 版 本 号 。 本 书 中 
使 用 的 Ember 和 Ember Data 版 本 号 均 为 2.4。 本 书 出 版 时 ，Ember CLI 自 动 下 载 的 框架 版 本 是 2.x， 
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如 果 你 在 开发 者 工具 中 看 到 的 版 本 号 仍旧 是 1x.x， 说 明 你 可 能 跳 过 了 前 面 安装 与 升级 Ember CLI 
的 部 分 。 





O00 /rer 


所 本 CO 0 localhost4200 


x | he 


民 | Elements Consoe Soures Network Timeline Profiles Resources Securty Audits Ember : 
Welcome to Ember http://localhost:4200/ 
回 View Tree Library Version 
Ember Inspect: 1.9.5 
/|# Routes 
Ember 2.4.4 
日 oaa Ember D: 2.43 
A peprecations 回 jQuery 2.2.3 
Tracker 0.0.0+416ccOf1 
© nto 


ADVANCED 


加 Promises 
Submit an lssue 


] Preserve log 





x Hide network messages DD) Errors Warnings Info Logs Debug Handled 








图 19-4 Ember 服务 器 
(请 注意 ， 在 终端 中 启动 Ember 服 务 器 后 显示 的 是 Ember CLI 的 版 本 号 ， 而 不 是 Ember 框 架 的 








19.3 ”安装 外 部 库 和 插件 


Ember CLI 为 开发 者 提供 了 许多 加 速 开发 的 途径 ， 其 中 包括 引入 一 些 开 源 代码 。 在 前 几 章 中 ， 
你 使 用 过 npm 向 本 地 环境 安装 node 模 块 ， 本 章 前 面 也 讨论 过 通过 另 一 个 包 管理 器 (Bower ) 加 载 
外 部 库 。 

Ember CLI 能 够 很 好 地 与 这 两 个 包 管 理 器 搭配 使 用 。 通过 它们 安装 外 部 库 或 工具 的 命令 如 下 : 


npm install [package name] --save-dev 
npm install [package name] --save 
bower install [package name] --save 


执行 这 些 命 令 时 ， 包 管理 器 会 自动 下 载 外 部 库 的 文件 ， 并 保存 到 bower_components 或 
node _ modules 目 录 中 。 


在 CoffeeRun 项 目 中 用 过 的 Bootstrap ， 在 这 次 的 Tracker 中 还 会 用 到 。 要 使 用 Bower 安 
Bootstrap ， 输 入 以 下 命令 即 可 : 


bower install bootstrap-sass --save 


现在 Bootstrap 库 已 经 下 载 到 了 本 地 , 包括 其 中 的 JavaScript 文 件 和 样式 文件 。 下 一 步 要 做 的 是 
把 它们 添加 到 Ember CLI 的 构建 过 程 中 ， 只 有 这 样 才能 在 应 用 中 访问 Bootstrap 提 供 的 资源 。 
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在 现代 前 端 工作 流 中 , 无 论 是 开发 脚本 还 是 样式 ,都 逃 不 掉 繁杂 的 编译 工作 。 这 里 借助 工具 
ember-cli-sass 可 以 降低 编译 的 复杂 性 , 它 会 在 Ember CLI 整 体 的 编译 流程 中 添加 一 个 步 又 :将 SCSS 
文件 转化 为 CSS 文 件 。SCSS， 有 了 时 也 称 为 Sass， 在 不 改变 我 们 熟知 日 喜爱 的 CSS 语 法 的 前 提 下 ， 
为 其 增加 了 许多 常用 的 逻辑 功能 ， 例 如 变量 、 函 数 、 循 环 、 键 值 对 等 。 

在 终端 中 安装 ember-cli-sass: 


ember install ember-cli-sass 


ember-cli-sass 只 是 Ember 众 多 插件 中 的 一 个 。Ember 有 一 个 插件 库 ( www.emberaddons.com )， 
其 中 包含 了 许多 外 部 库 和 配置 代码 、 创建 好 的 辅助 方法 和 组 件 以 及 其 他 类 型 的 辅助 工具 , 这些 插 
件 可 以 通过 Ember CLI 的 命令 ember install 进 行 安装 。 

注意 ，Ember CLI 是 一 个 相对 较 新 的 工具 ， 而 某 些 插 件 有 可 能 已 经 过 时 。 如 果 在 安装 插件 时 
遇 到 问题 ， 可 以 去 这 个 插件 的 GitHub 问 题 页 面 (Issue ) 看 看 。 

刚才 已 经 为 应 用 添加 了 编译 SCSS 的 功能 ， 现 在 尝试 把 项 目 中 的 .css 文 件 修改 为 ,scss 文 件 : 将 
app/styles/app.css 重 命名 为 app/styles/app.scss。 然 后 重启 Ember 服 务 右 以 便 重新 加 载 文 件 。 

现在 来 测试 一 下 : 在 样式 表 中 添加 一 个 SCSS 变 量 。 打 开 app/styles/app.scss 文 件 ， 以 键 值 对 的 
形式 添加 一 个 变量 ( 注意 ， 变 量 名 必须 以 $ 开 头 ): 


$bg-color: coral; 
htmL { 

background: $bg-color; 
} 


查看 浏览 絮 ， 应 该 就 能 看 到 页 面 多 了 背景 色 ( 如 图 19-5 所 示 )。 
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图 19-5 测试 编译 SCSS 
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下 一 步 是 将 Bootstrap 的 样式 和 脚本 引入 到 项 目 中 。 之 前 通过 bower install bootstrap- 
sass 命 令 安 装 了 SCSS 版 本 的 Bootstrap ， 现 在 需要 将 它 添 加 到 项 目 中 。 首 先 在 样式 表 中 引入 这 个 
库 ， 然 后 修改 Ember CLI 的 配置 文件 以 便 在 编译 时 加 载 它 。 


19.4 ”修改 配置 


Broccoli 就 是 前 面 提 到 过 的 编译 引擎 。 新 增 JavaScript 和 样式 文件 时 ， 需 要 对 它 的 配置 做 一 些 
修改 。 
配置 文件 叫 embercli-buildjs， 由 Ember CLI 生 成 。 不 论 是 向 项 目 中 添加 依赖 ， 还 是 修改 应 用 
的 输出 结构 ,都 可 以 通过 修改 这 个 配置 文件 实现 。 对 Tracker 应 用 来 说 ， 只 需要 添加 外 部 依赖 库 以 
及 修改 SCSS 的 编译 配置 。 

打开 ember-cli-build.js 文 件 。 首先 添加 一 个 变量 , 指向 Bootstrap 资 源 目 录 的 路 径 ; 接着 在 配置 
中 添加 一 个 sass0ptions 对 象 ,， 它 只 包含 一 个 属性 ijncludePaths, 值 为 Bootstrap 样 式 表 的 路 径 : 









































var EmberApp = require('ember-cli/lib/broccoli/ember-app'); 
module.exports = function(defaults) { 
var bootstrapPath = 'bower_components/bootstrap-sass/assets/'; 


var app = new EmberApp(defaults, { 
1/ 一 此 处 加 入 选项 
sass0Options: { 
includePaths: [ 
bootstrapPath + 'stylesheets' 
] 


}); 
// 模板 注释 a 


// 生成 指向 bootstrap 资 源 文件 的 路 径 
// 使 用 import 向 应 用 添加 对 该 资源 的 引用 
app.import(bootstrapPath + 'javascripts/bootstrap.js'); 


return app.toTree(); 
}; 
有 了 以 上 配置 ，Ember CLI 就 可 以 从 bower_components/bootstrap-sass/assets/stylesheets 目 录 中 
加 载 *.scss 文 件 进 行 编译 了 。 保 存 修改 后 的 配置 文件 ， 重 启 Ember 服 务 器 使 新 的 配置 生效 。 
接 下 来 ， 在 app.scss 中 使 用 Qimpo rt 指令 ， 引 入 Bootstrap 的 样式 : 


$bg-color: coral; 
htmt_£ 

background: $bg-cotor; 
} 
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A hia 
// bootstrap variable overrides 
A 


// end bootstrap variable overrides 
@import 'bootstrap'; 
@import 指 令 的 功能 是 将 bootstrap.scss 文 件 的 内 容 添 加 到 app.scss 中 , 这 个 过 程 将 由 Ember CLI 
的 构建 过 程 代劳 。Bootstrap 的 样式 文件 所 在 的 目录 是 bower components/bootstrap-sass/assets 
/stylesheets/。 
在 配置 文件 中 添加 了 app.import(bootstrapPath + 'javascripts/bootstrap. 
) ; ， 用 于 在 Ember CLI 构 建 时 引入 Bootstrap 的 JavaScript 组 件 。 引 入 的 所 有 文件 都 会 被 添加 到 
一 个 列表 中 ， 最 后 被 拼接 成 一 个 文件 /distyassets/vendorjs。 对 Bootstrap 来 说 ，bootstrap.js 中 包含 了 
各 个 独立 的 模块 ,例如 collapse、modal、tab、dropdown 等 。 将 所 有 这 些 模 块 都 添加 到 项 目 中 
可 能 会 有 些 豚 肿 ， 所 以 后 面 你 可 以 调整 配置 ， 选 择 性 地 添加 项 目 会 用 到 的 模块 。 
资源 文件 添加 完成 后 ， 先 来 确认 一 下 它 是 和 否 生 效 ， 再 进行 下 一 步 。 这 时 你 可 能 会 想到 应 用 目 
录 中 的 index.html 文 件 ， 但 最 好 不 要 在 这 里 测试 代码 ， 这 个 文件 主要 是 为 构建 过 程 服 务 的 。 
正确 的 做 法 是 将 HTML 元素 添 加 到 应 用 模板 中 ， 模 板 存放 在 在 app/templates 目 录 中 。 关 于 模 
板 的 细节 会 在 第 23 章 介绍 
现在 ， 打开 appftemplates/applicationhibs 广 件 ， 添 加 一 个 Bootstrap 的 NavBar 组 件 : 
<h2 id="titte">Welcome to Ember</h2> 













































































{fouttet}} 
<header> 
<nav class="navbar navbar-default"> 
<div class="container-fluid"> 
<! -将 APP 名 称 和 展开 按钮 放 到 一 个 层 中 ， 以 便 进行 移动 匾 乱 配 - -> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle collapsed" 
data-toggle="collapse" data-target="#top-navbar-collapse"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class="navbar-brand">Tracker</a> 
</div> 


<!- -将 导航 链接 、 表 单 和 其 他 内 容 放 到 弹出 层 中 --> 
<div class="collapse navbar-collapse" id="top-navbar-collapse"> 
<ul class="nav navbar-nav"> 
<li> 
<a href="#">Test Link</a> 
</Li> 
<1li> 
<a href="#">Test Link</a> 
</Li> 
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</ul> 
</div><!-- /.navbar-collapse --> 
</div><!-- /.container-fluid --> 

</nav> 
</header> 
<div class="container"> 

{{outlet}} 
</div> 


这 里 添加 了 NavBar 组 件 以 及 相应 的 HTML 属 性 ， 如 id、class、name、data 等 。 男 外 ,还 把 
模板 中 原 有 的 {{outlet}} 移 到 了 <div> 标 签 中 。{{outlet}} 在 模板 文件 中 代表 子 模板 ， 下 一 章 
会 详细 介绍 。 

图 19-6 展 示 了 这 段 代 码 的 效果 。 
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图 19-6 Bootstrap NavBar 





NavBar 支 持 响 应 式 一 一 当 徐 口 宽度 小 于 768px 时 ， 莱 单 会 自动 收 起 ， 默 认 只 展示 一 个 按钮 。 
点 击 按钮 可 以 显示 或 隐藏 菜单 ( 如 图 19-7 所 示 )。 这 个 事件 的 监听 和 处 理由 bootstrap.js 完 成 。 
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恭喜 ! 你 的 第 一 个 Ember 应 用 已 经 可 以 运行 了 。 在 整个 过 程 中 ， 你 通过 安装 的 工具 完成 了 和 后 
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测试 Bootstrap NavBar 组 件 的 展开 与 折 苇 





x Mie 


成 代码 、 编 译 资源 文件 、 加 载 依赖 以 及 架设 服务 器 等 操作 。 你 已 经 为 这 个 应 用 打下 了 坚实 的 基础 ， 


后 面 几 章 将 完成 剩 下 的 开发 工作 。 


19.5 ”延展 阅读 : npm 和 Bower 的 安装 


npm instaLL 和 bower instalLtL 命 令 后 的 - -save-dev 和 - -save 人 参数 会 在 它们 各 自 的 配置 文 


件 中 添加 一 个 键 值 对 ， 用 来 描述 安装 的 模块 的 名 称 和 版 本 。Bower 的 配置 文件 是 bowerjson，npm 





的 配置 文件 是 package.json( 在 Chattrbox 中 出 现 过 )。 


以 下 是 bowerjson 的 一 个 示例 ， 可 以 看 到 新 添加 的 键 值 对 : 


"0.2.2", 


{ 

"name": "tracker", 

"dependencies": { 
"ember": "~2.4.3", 
"ember-cli-shims": "0.1.1", 
"ember-cli-test-loader": 
"ember-qunit-notifications": "0.1.0", 
"bootstrap-sass": "^3.3.6" 

} 
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bowerjson 中 列 出 了 所 依赖 的 emberjs 库 以 及 要 求 的 最 低 版 本 号 。 代 码 仓库 或 版 本 控制 系统 中 
并 不 会 保存 这 些 资源 , 它们 只 保存 bowerjson 文 件 。 开 发 者 在 检 出 代码 后 可 以 通过 bower install 
和 npm instaLL 下 载 这 些 资源 ， 完 成 环境 的 搭建 。 


19.6 初级 挑战 : 限制 引入 


请 修改 ember-cli-build.js 文 件 ， 删 除 对 bootstrap.js 整 体 的 引入 ， 只 选择 性 地 引入 collapse.js 和 
transition.js 两 个 文件 。 这 样 可 以 在 不 影响 NavBar 运 行 的 前 提 下 ， 缩 小 编译 生成 的 vendor.js 文 件 。 

在 动手 修改 前 ， 找 到 dist/assets/vendor.js 文 件 ， 记录 下 它 的 行 数 (或 者 文件 大 小 ) 并 和 修改 后 
的 行 数 做 个 对 比 。 

















19.7 ”中 级 挑战 : 添加 Font Awesome 库 


Font Awesome 是 一 款 UI 库 , 它 提供 了 一 系列 常用 的 图 标 , 而 且 这 些 图 标 像 文字 一 样 可 以 自由 
缩放 。 请 从 Ember CLI 的 插件 库 引 入 Font Awesome ， 并 为 app/templates/application.hbs 添 加 一 个 图 
标 。 可 以 在 Font Awesome 的 GitHub 主 页 上 查看 更 多 信息 。 











19.8 ”高 级 挑战 ， 自 定义 NavBar 


Bootstrap 的 样式 是 以 SCSS 编 写 的 ， 其 中 使 用 了 许多 灵活 的 变量 和 函数 。 如 果 在 项 目 中 引用 
的 是 SCSS 版 本 的 Bootstrap ， 那 么 你 就 可 以 很 方便 地 控制 它 的 样式 规则 一 一 甚至 还 可 以 新 建 一 套 
样式 ， 通 过 修改 变量 覆盖 Bootstrap 提 供 的 默认 值 。 

请 尝试 仅 通过 在 app/stylesheets/app.scss 文 件 中 添加 或 修改 变量 ， 对 NavBar 的 background - 
coLor 、border-radius 和 padding 进 行 修改 。 
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完成 上 一 章 后 ，Tracker 应 用 已 经 拥有 了 基本 的 框架 , 现在 需要 为 它 填充 页 面 以 及 定制 路 由 
规则 。 

路 由 选择 就 像 交 警 指挥 交通 , 它 会 根据 用 户 输入 的 URL 选 择 要 渲染 的 页 面 。 在 之 前 的 几 个 项 
目 中 ,你 曾 为 表单 提交 和 按钮 点 击 定义 了 事件 监听 器 。 路 由 选择 和 事件 监听 器 有 些 相 似 , 不 过 它 
监听 当前 URL 的 变动 。 

每 个 网 站 都 会 用 到 路 由 选择 ,虽然 具体 方案 可 能 不 尽 相 同 。 例 如 ， 访 问 一 个 URL: 
www.bignerdranch.com/we-teach/。 服 务 右 会 根据 路 由 /we-teach/ 找 到 对 应 的 文件 夹 we-teach， 继 而 
找到 并 泻 染 其 中 的 HTML 文 件 。 对 有 些 网 站 来 说 可 能 是 另外 一 种 情形 : 服务 咒 并 不 会 去 寻找 静态 
的 HTML 文 件 ， 而 是 运行 一 段 程序 ， 动 态 生 成 HTML 代 码 。 

Ember 应 用 可 以 实现 类 似 的 功能 , 但 它 不 需要 向 服务 器 请 求 HTML。 当 需要 进行 页 面 切换 时 ， 
Ember 首 先 把 应 用 当前 的 地 址 修改 为 目的 页 面 的 地 址 。 这 时 路 由 模块 Router ( 应 用 核心 对 象 的 一 
个 子 元 素 , 包含 对 URL 改 变 事件 的 监听 器 和 处 理 程序 ) 会 根据 新 的 地 址 查询 路 由 表 ， 找到 对 应 的 
路 由 对 象 ( Ember.Route )。 接 着 ， 它 调用 路 由 对 象 中 的 一 系列 回调 方法 ， 开 始 为 目的 页 面 准备 
数据 ， 这 一 系列 回调 方法 被 叫 作 路 由 生命 周期 钧 子 ( route lifecycle hook ) 。 

创建 路 由 是 Ember 开 发 中 的 一 项 基本 操作 。 按 照 Ember 的 命名 规则 ， 控 制 器 和 模板 需要 与 路 
由 的 名 称 相 匹配 。 举 个 例子 ， 假 如 创建 了 一 个 路 由 sightings， 路 由 模块 会 将 所 有 对 /sightings 的 请 
求 映射 到 路 由 SightingsRoute 上 ， 接 着 执行 名 为 SightingsController 的 控制 器 ， 最 后 洽 染 
app/templates/sightings.hbs 模 板 。 
通过 本 章 的 学 习 ， 你 可 以 了 解 Ember 应 用 架构 ， 并 且 学 会 如 何 使 Ember CLI 创 建 路 由 模块 和 
模板 文件 。 路 由 是 Ember 应 用 的 关键 ， 学 好 本 章 的 内 容 将 为 后 面 $ 章 的 应 用 开发 做 好 铺垫 。 

图 20-1 展 示 了 本 章 结束 时 Tracker 的 界面 。 






















































































338 第 20 章 路 由 


选择 、 路 由 表 、 模 型 





四 全 四 /Mcker 


€ 5 localhost:4200/sightings/ 
Tracker TestLink TestLink 
Sightings 


Asilomar - Sun Mar 06 2016 19:00:00 GMT-0500 (EST) 
Asilomar - Sun Mar 06 2016 19:00:00 GMT-0500 (EST) 
Asilomar - Sun Mar 06 2016 19:00:00 GMT-0500 (EST) 
Asilomar - Sun Mar 06 2016 19:00:00 GMT-0500 (EST) 
Asilomar - Sun Mar 06 2016 19:00:00 GMT-0500 (EST) 


Asilomar - Sun Mar 06 2016 19:00:00 GMT-0500 (EST) 


20.1 Ember 生成 器 


Ember CLI 提 供 了 一 个 生成 器 的 脚手架 工具 generate， 它 对 学 习 Ember 的 约定 和 命名 模式 很 有 


图 20-1 
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ember, debug, is:6395 
ember, debug, is:6395 
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ember. debug, js:6395 
ember. debug. js:6395 


DEBUG: Ember 1 2.4.4 
DEBUG: Ember Data : 2.4.3 
: jQuery : 2.2.3 


;Console Animations 


助 。 通 过 命令 ember generate (可 以 简写 为 ember g ) 可 以 生成 相应 的 文件 和 样板 代码 。 




















回想 一 下 ,开发 Tracker 应 用 的 目的 是 收集 神秘 生物 (例如 野人 ) 的 目击 记录 。 应 用 需要 收 


的 信息 有 : 目击 记录 、 神 秘 生物 类 型 和 目击 者 ， 所 以 需要 以 下 路 由 : 


路 由 名 称 


路 由 路 径 


页 面 内 容 


X Wie 


oN 


帮 





Wtr 


~ 





index 

sightings 
cryptids 
witnesses 
sighting 
cryptid 

witness 
sightings index 
sightings new 
sighting index 


sighting edit 


/index 

/sightings 

/cryptids 

/witnesses 

/sighting 

/cryptid 

/witness 

/sightings/index 
/sightings/new 
/sighting/:sighting_id/index 
/sighting/:sighting id/edit 





无 ， 重 定向 至 sightings 
目击 记录 列表 
神秘 生物 列表 
目击 者 列表 

习 击 记录 详情 
神秘 生物 详情 
目击 者 详情 

目击 记录 默认 页 面 
创建 目击 记录 的 表单 
单条 目击 记录 详情 页 面 
编辑 目击 记录 的 表单 
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现在 通过 ember generate 命 令 创建 这 些 路 由 。 打 开 终 端 ， 进 入 到 tracker 目 录 ， 依 次 执行 以 
下 命令 〈 每 次 一 行 ) 创建 路 由 : 











ember g route index 

ember g route sightings 
ember g route sightings/index 
ember g route sightings/new 
ember g route sighting 

ember g route sighting/index 
ember g route sighting/edit 
ember g route cryptids 

ember g route cryptid 

ember g route witnesses 
ember g route witness 
创建 的 过 程 如 图 20-2 所 示 。 





Oe@e Bl tracker 一 bash 一 65x56 


installing route 
app/routes/sighting.js 
app/templates/sighting.hbs 
updating router 
sighting 
installing route-test 
tests/unit/routes/sighting-test.js 
tallPersonTodd:tracker tgandee$ ember g route sighting/index 
installing route 
app/routes/sighting/index.ijs 
app/templates/sighting/index.hbs 
updating router 
sighting/index 
installing route-test 
tests/unit/routes/sighting/index-test.js 
tallPersonTodd:tracker tgandee$ ember g route sighting/edit 
installing route 
app/routes/sighting/edit.js 
app/templates/sighting/edit.hbs 
updating router 
sighting/edit 
installing route-test 
tests/unit/routes/sighting/edit-test.js 
tallPersonTodd:tracker tgandee$ ember g route cryptids 
installing route 
app/routes/cryptids.ijs 
app/templates/cryptids.hbs 
updating router 
cryptids 





图 20-2 创建 路 由 


现在 看 一 下 ember g 命 令 做 了 哪些 工作 。 首 先 ， 它 在 routes/ 和 templates/ 目 录 下 创建 了 一 些 文件 。 
打开 app/routes/index.js， 能 看 到 在 这 个 模块 中 引入 ( ijmport ) 了 Ember, 最 后 导出 ( export ) 
了 EmberRoute: 


import Ember from 'ember'; 








export default Ember.Route.extend({ 
}); 


.extend 方 法 接受 一 个 JavaScript 对 象 作为 参数 ， 用 以 创建 一 个 EmberRoute 的 子 类 。 使 用 ES6 
的 模块 语法 可 以 为 每 条 路 由 都 创建 独立 的 模块 。 
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无 论 是 使 用 生成 器 创建 路 由 (这 里 选用 的 做 法 ) 还 是 手动 创建 路 由 ，Ember CLI 都 能 自动 找 
到 EmberRoute， 并 将 其 加 载 到 项 目 中 。 当 然 ， 使 用 生成 器 会 更 加 方便 ， 因 为 它 在 创建 文件 的 同 
时 会 添加 样板 代码 。 





打开 app/templates/index.hbs ( 它 是 Ember CLI 为 IndexRoute 生 成 的 模板 文件 ), 能 看 到 其 中 只 
有 一 行 代码 : {{outlet}}。 


你 应 该 有 印象 ， 在 上 一 章 中 也 出 现 过 这 名 代码 ， 是 在 templates/application.hbs 文 件 中 。 它 的 
作用 是 在 路 由 层级 之 间 实 现 内 容 垦 套 ， 稍 后 就 会 对 它 进行 详细 讲解 。 
暂时 先 不 动 {{outlet}}， 只 在 它 前 面 添加 一 个 <h1> 元 素 : 


<hl>Index Route</h1> 
{{outlet}} 





运行 ember server 启 动 服务 器 ， 开 发 过 程 中 让 它 保持 后 台 运 行 就 好 。 如 果 同 时 还 需要 运行 
其 他 Ember CLI 命 令 ( 例如 调用 生成 器 )， 则 新 开 一 个 终端 窗口 。 在 加 入 新 模块 时 ， 服 务 器 在 运行 
会 自动 将 其 加 载 到 应 用 中 ， 并 会 刷新 浏览 器 。 





打开 Chrome， 访 问 http://localhost:4200， 应 该 能 看 到 如 图 20-3 所 示 的 页 面 。 


自身 @ rc 
人 C localhost:4200 


Tracker TestLink TestLink 


民品 Elements Console Sources Network 六 
Q@ 可 top Y 国 Preserve log 

t Regex © Hide network messages 

Index Route 图 Eros Warnings Info Logs Debug Handled 
DEBUG: ————-——-————————-———--—--———  _ ember.debug.is:6395 
DEBUG: Ember : 2.4.4 ember, debug. is:6395 
DEBUG: Ember Data ; 2.4.3 ember, debug,. js:6395 
DEBUG: jQuery : 2.2.3 ember, debug, is:6395 
Ne ember, debug. js:6395 


:Console Animations 


图 20-3 ”首页 





在 这 个 页 面 中 ， 能 看 到 app/templates/application.hbs 中 的 NavBar 组 件 和 app/templates/index.hbs 
中 的 <h1> 元 素 。 它 们 为 什么 会 在 这 里 一 起 出 现 ? 


在 创建 应 用 的 过 程 中 ，Ember 自 动 生成 了 许多 文件 ， 其 中 包括 app.js 和 router.js。app.js 是 


是 应 用 
的 入 口 ， 用 于 处 理 初始 化 之 类 的 工作 。 其 中 包含 一 些 逻 辑 ， 用 于 在 初始 化 时 创建 一 个 Ember 的 实 
例 ， 这 个 过 程 与 在 CoffeeRun 中 创建 Truck 类 似 。 
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守 


Ember 应 用 在 启动 或 重启 时 会 对 路 由 模块 (Router ) 和 应 用 路 由 (AppLicationRoute ) 进 
行 实例 化 。 这 两 个 对 象 十 分 关键 ， 它 们 控制 着 整个 应 用 。 

在 routerjs 中 ， 通 过 注册 路 由 ， 可 以 将 URL 绑 定 到 特定 的 页 面 上 。 在 注册 路 由 时 可 以 提供 一 
些 配 置 参数 ， 还 可 以 创建 向 套 结构 的 路 由 。 这 也 是 Ember 一 项 非常 强大 的 功能 : 能够 在 不 同 的 页 
面 中 复 用 逻辑 和 内 容 。 

打开 routerjs， 查 看 其 中 注册 路 由 的 方法 : 


import Ember from 'ember'; 
import config from './config/environment'; 






























































const Router = Ember.Router.extend({ 
Location: config.LocationType 


}); 


Router.map(function() { 
this.route('sightings', function() { 
this.route('new'); 


}); 


this.route('sighting', function() { 
this.route('edit'); 


}); 


this. 


this 


}); 


routel(' 


.routel(' 
this. 
this. 


routel(' 
routel(' 


cryptids'); 
cryptid'); 
witnesses'); 
witness'); 


export default Router; 


这 上段 代码 中 的 Router .map 接 受 一 个 回调 函数 作为 参数 。 在 这 个 回调 函数 中 , 使 用 route 方 法 











nn 


结构 中 的 父 级 路 由 自动 绑 定 一 条 index 子 路 由 ， 就 像 在 routerjs 中 定义 的 一 样 : 








主 册 路 由 。 还 可 以 为 route 方 法 传人 回调 函数 作为 第 二 个 参数 以 实现 路 由 的 府 套 。Ember 会 将 这 

















5 般 套 转换 成 相应 的 路 由 层级 ， 在 层级 的 最 顶端 是 AppLicationRoute。 














当 用 户 访 问 一 个 映射 到 舱 套 路 由 的 URL 时 ，Ember 会 首先 调 取 父 级 路 由 对 应 的 模板 。 在 其 中 
寻找 {{outlet}} 标 签 ， 这 个 标签 代表 着 “这 里 要 替换 成 子 模板 ”。 
来 看 看 这 个 逻辑 在 实际 应 用 中 的 效果 。 























在 应 用 首页 的 页 面 中 , 首页 路 由 ( IndexRoute ) 对 应 的 模板 稀 套 在 应 用 路 由 (ApplicationRoute ) 
的 模板 中 。 这 背后 还 隐藏 了 一 个 逻辑 ，Ember 会 自动 在 项 目的 routes/ 文 件 夹 下 寻找 名 为 Index.js 的 





hy 














文件 。 对 于 任意 一 条 路 由 , 都 可 以 在 它 对 应 的 路 由 文件 夹 下 创建 一 个 index.js 文 件 , 作为 该 路 由 的 


[ag 


默认 页 面 。 这 是 一 种 通用 做 法 ， 在 其 他 Ember 应 用 中 也 应 该 这 样 操作 。 








不 知道 你 有 没有 注意 到 ，routerjs 中 并 没有 与 index 相 关 的 路 由 。 事实 上 ，, Ember 会 为 所 有 上山 套 





Router.map(function() { 
this.route('index'); 
this,.route('sightings', function() { 
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this.route('index'); 
this.route('new'); 
}); 
this.route('sighting', function() { 
this.route('index'); 
this.route('edit'); 
}); 
this.route('cryptids'); 
this.route('cryptid'); 
this.route('witnesses'); 
this.route('witness'); 


}); 


20.2 ” 藤 套 路 由 


通过 路 由 ,可 以 很 方便 地 控制 视图 中 展示 的 内 容 。 就 像 文件 夹 一 样 , 骨 套 的 路 由 将 基于 URL 
的 一 系列 相关 路 由 聚合 在 一 起 。 可 以 将 父 级 路 由 理解 成 名 词 ， 将 子路 由 理解 成 动词 或 形容 词 : 


// 父 级 路 由 就 像 名 词 

this.route('sightings', function() { 
// 子 路 由 就 像 动词 或 者 形容 词 
this,route('new')， 


}); 

这 里 sightings 是 一 个 父 级 路 由 ,代表 着 目击 记录 列表 ( 名 词 )， 而 其 中 骸 套 的 子路 由 new 代 表 
着 创建 一 条 目击 记录 ( 动词 )。 无 论 是 父 级 路 由 还 是 子路 由 ， 都 通过 this. route 绑 定 到 URL。 

通过 模板 诸 套 ， 可 以 让 一 部 分 内 容 在 所 有 页 面 上 都 显示 ( 例如 导航 条 )， 而 其 他 内 容 都 只 在 
特定 的 页 面 中 显示 (例如 首页 路 由 的 模板 只 在 首页 中 显示 )。 需 要 用 每 条 路 由 的 回调 函数 指定 它 
获取 数据 的 方法 。 

现在 , 对 添加 路 由 时 自动 生成 的 一 系列 模板 进行 一 些小 修改 , 然后 查看 各 个 页 面 修改 后 的 效 
果 。 在 这 一 节 中 添加 的 所 有 代码 都 只 是 临时 性 的 ， 目 的 是 帮助 你 理解 路 由 间 的 关系 。 

首先 修改 app/templates/sightings.hbs 模 板 ， 在 {{outlet}} 标 签 的 上 方 添加 一 个 <h1> 元 素 。 


<h1>Sigophtings</h1> 
{{outlet}} 


接 下 来 编辑 app/templates/sightings/index.hbs 模 板 。 这 一 次 将 其 中 的 {{fouttLet}} 标 签 直 接替 换 
成 <h1>。 在 父 级 模板 中 ，{{outlet}} 标 签 代表 被 舱 套 的 子 模 板 。 而 对 于 app/templates/sightings/ 
index.hbs 来 说 ， 它 本 身 已 经 是 最 未 级 路 由 的 模板 ， 不 存在 子 模板 ， 所 以 不 再 需要 {{foutLet}}。 


{outtet}} 
<hl>Index Route</h1> 


保存 文件 ， 访 问 http://localhost:4200/sightings/ 查 看 效果 ( 如 图 20-4 所 示 )。 
接 下 来 ,编辑 app/templates/sightings/new.hbs。 这 个 路 由 同样 也 是 最 末 级 ,所 以 也 用 同样 的 方 
式 处 理 : 删 掉 {{foutLet}}， 和 替换 成 <h1>。 
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{{foutlet}} 
<hl>New Route</h1> 


© rc x 
| Kr © localhost:4200/sightings 








Tracker TestLink TestLink | 民 外 Eements Console Sources Network » 





























| Q@ 了 top Y 国 Preservelog 
。 。 |[Fiter | 日 Regex © Hide network messages 
Sightings | 四 Erors ”Warnings Info Logs Debug Handled 
DEBUG: 一 一 -一 一 -一 一 一 一 一 一 一 一 一 Smberdebug .jsi6395 
Index Route buc: Bier 2 i 
DEBUG: Ember Data ember. debug, js:6395 
DEBUG: jQuery ember.debug.is:6395 
DEBUG: ——————————————————— ember.debug,is:6395 
| > 
| ;Console Animations X 
图 20-4 目击 记录 : 藤 套 路 由 
现在 访问 http://localhost:4200/sightings/mew〔 如 图 20-5 所 示 )。 
生息 四 /Mcker x VE 2 
所 CD localhost'4200/sightings/new 四 四 | | | | 人 交 芝 三 
Tracker TestLink TestLink | 民 | Elements Console Sources Network » x 
IS®% top Y 国 Preservelog 
二 (Ener 目 Regex © Hide network messages 
Sightings 四 Erors Warnings Info Logs Debug Handled 
DEBUG: -一 一 一 一 -一 emberdebug ,jsi6395 
New Route DEBUG: Ember : 2.4.4 ember, debug, 15:6395 
DEBUG: Ember Data : 2.4.3 ember. debug. js:6395 
DEBUG: jQuery YX ember. debug, is:6395 
DEBUG: —————————————————————— emberdebug,is:6395 
> 
| :| Console Animations 区 


图 20-$ 目击 记录 : new 路 由 
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现在 Tracker 应 用 的 路 由 已 经 拥有 了 藤 套 结构 , 包含 父 模板 app/templates/sightings.hbs, 以 及 在 
其 中 使 用 {{outlet}} 标 签 演 染 的 子 模板 ( 例如 app/templates/sightings/index.hbs 和 app/templates/ 


sightings/new.hbs )。 


20.3 Ember Inspector 





Ember Inspector 提 供 了 一 种 查看 应 用 中 的 全 部 路 由 的 便 损 


Routes 菜 单 ， 如 图 20-6 所 示 。 





人 


途径 


Developer Tools - http://localhost:4200/ 





O09 

[3 口 Elements Console Sources Network Timeline Profiles Resources Security Audits Ember 
http://localhost:4200/ 符 同 curent Route only 

回 View Tree Route Name Route 


applic: 
/# Routes 
applic: 


日 baa 
applic: 


ation application 
A Deprecations @ loading loading 
error error 
© Info 
sightings_loading sightings-load... 
ADVANCED 


ation_loading application-lo... 


ation_error application-er. 


sightings_error sightings-error 
四 Promises 


sightings sightings 


[Na] Container 


(2) Render Performance 


mit an | 


sightings.loadi sightings/load... 
sightings.error sightings/error 
sightings.new_ sightings/new... 
sightings.new_ sightings/new. 
sightings.new sightings/new 
sightings.inde; sightings/inde. 
sightings.inde; sightings/inde... 


sightings.inde; sightings/index 


>$E 


>$E 


Controller Template 
application-loading application-loading 
application-error application-error 
application >$E application 
loading loading 
error error 
sightings-loading sightings-loading 
sightings-error Sightings-error 
sightings sightings 
sightings/loading sightings/loading 
Esightings/error sightings/error 


sightings/new-loading sightings/new-loading 
sightings/new-error sightings/new-error 
sightings/new sightings/new 
sightings/index-loadin¢ sightings/index-loadi 
sightings/index-error sightings/index-error 


sightings /index sightings/index 


。 在 Ember Inspector 中 点 击 

















URL 


/application_loading 


/loading 


/sightings_loading 


/sightings/loading 


/sightings/new_loading 


/sightings/new 


/sightings/index_loading 


/sightings 





图 20-6 ”路 由 结构 
好 多 路 由 ! 这 里 展示 的 路 由 比 实际 创建 的 多 太 多 了 。 仔 细 观 察 能 发 现 ， 其 中 许多 路 由 都 以 





Loading 或 error 结 尾 。 习 


20.4 ”指派 模型 


有 实 上 这 些 路 由 和 index 一 样 都 是 由 Ember 自 动 创建 的 ,为 数据 加 载 过 程 
中 的 各 个 状态 服务 ， 目 的 是 补 全 路 由 在 不 同 状 态 间 切换 时 的 空隙 。 


接 下 来 要 做 的 是 使 用 路 由 对 象 的 model 方 法 获取 数据 。 每 个 Ember.Route 对 象 都 有 一 个 
model 方 法 ， 它 的 作用 是 将 模型 (还 记得 模型 吗 ? 模型 就 是 支撑 模板 的 数据 ) 指派 给 控制 器 ， 它 


会 以 Promise 对 象 的 形式 返 


返回 数据 。 


每 当 UREL 发 生 改 变 时 ,应 用 都 会 在 幕后 重新 初始 化 路 由 对 象 。 路 由 对 象 上 包含 四 个 钩子 ,可 
以 用 来 对 路 由 进行 一 些 设置 : beforeModel、model、afterModel 和 setController。 
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首先 来 看 model 。 
打开 app/routes/sightings.js 文 件 ， 在 model 方 法 中 添加 一 些 模拟 数据 : 


import Ember from 'ember'; 


export default Ember.Route.extend({ 
modeL(){ 
return [ 
{ 
id: 1， 
Location: 'AsiLomar '， 
sightedAt: new Date('2016-03-07') 
Jy 
{ 
id: 2， 
Location: 'Asilomar', 
sightedAt: new Date('2016-03-07') 
}, 
{ 
id: 3, 
Location: 'Asilomar', 
sightedAt: new Date('2016-03-07') 
}, 
{ 
id: 4, 
Location: 'Asilomar', 
sightedAt: new Date('2016-03-07') 
}, 
{ 
id: 5, 
Location: 'Asilomar', 
sightedAt: new Date('2016-03-07') 
}, 
{ 
id: 6, 
Location: 'Asilomar', 
sightedAt: new Date('2016-03-07') 
} 
] ; 
} 
}); 


注意 这 里 定义 nodel 时 的 语法 : 
model() { 
[你 的 代码 ] 
} 
这 是 ES6 中 定义 的 语法 ， 是 下 面 形 式 的 简写 : 
model: function() { 


[你 的 代码 ] 
} 
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后 面 的 章节 都 会 采用 简写 形式 为 对 象 定义 方法 。 

modetL 钩 子 可 以 用 来 获取 泻 染 模板 所 需要 的 数据 。Ember.Route 对 象 的 每 个 生命 周期 方法 都 
会 给 钧 子 函 数 返 回 一 些 对 象 。 从 modeL 中 返回 的 数据 最 终 会 进入 setupControLLer 钩 子 , 用 于 将 
数据 赋 给 SightingsController 的 model 属 性 ,这 些 数据 可 以 在 app/templates/sightings.hbs 模 板 和 
app/templates/sightings/index.hbs 模 板 中 访问 。 

将 app/templates/sightings/index.hbs 替 换 成 以 下 代码 ， 稍 后 会 详细 解释 : 


<hl>Ihdex- -Reute</h1> 
<div class="panel panel-default"> 
<ul class="list-group"> 
{{#each model as |sighting|}} 
<li class="list-group-item"> 
{{sighting.location}} - {{sighting.sightedAt}} 
</Li> 
{{/each}} 
</ul> 
</div> 


如 果 你 以 前 没有 接触 过 模板 语言 的 话 ， 初 看 这 段 代 码 可 能 感觉 比较 奇怪 。 那 些 被 双 大 括号 
{{ }} 包 起 来 的 代码 看 上 去 是 语句 ， 但 实际 上 是 JavaScript 的 函数 。 将 这 段 代 码 翻译 成 自然 语言 ， 
则 是 “为 model 属 性 ( 类 型 是 数组 ) 中 的 每 一 条 目击 记录 ( sighting ) 泻 染 一 个 <Li> 容 器 ， 在 
容器 中 展示 目击 记录 发 生 的 时 间 ( sightedAt ) 和 地 点 (Location )。 

第 23 章 将 会 介绍 {{ }} 语 法 ， 还 会 对 {{#each}} 进 行 重点 介绍 。 

访问 http:/localhost:4200/sightings， 应 该 能 看 到 和 图 20-7 相 似 的 页 面 。 















































O00 /DTacker 





€ 人 localhost:4200/sightings/ 对 三 
Tracker TU TU | Eements Console Sources Network » X 
Q@ tp v Preserve log 
ter Regex © Hide network messages 
Sightings (WD Erors Warings Info Logs Debug Handled 
Asilomar - Sun Mar 06 2016 19:00:00 GMT-0500 (EST) SN ember, debyug, 15:6395 
DEBUG: Ember :2.4.4 ember. debug. is:6395 
Asilomar - Sun Mar 06 2016 19:00:00 GMT-0500 (EST) DEBUG: Ember Data : 2.4.3 ember. debug, is:6395 
DEBUG: jQuery :2.2.3 ember. debug, is:6395 
Asilomar - Sun Mar 06 2016 19:00:00 GMT-0500 (EST) i EPESRSEEES amber debid. 12106308 
Asilomar - Sun Mar 06 2016 19:00:00 GMT-0500 (EST) a 
Asilomar - Sun Mar 06 2016 19:00:00 GMT-0500 (EST) 
Asilomar - Sun Mar 06 2016 19:00:00 GMT-0500 (EST) 
;console Animations x 





图 20-7 首页 数据 列表 
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现在 已 经 完成 了 路 由 循环 中 的 第 一 部 分 , 也 就 是 将 数据 传递 给 模板 进行 泻 染 。 第 23 章 将 会 
绍 模板 语言 Handlebars。 借 助 模板 语言 ， 可 以 通过 控制 器 的 属性 控制 应 用 的 状态 ， 而 且 只 在 状态 





介 
































发 生 改 变 时 泻 染 必 要 的 DOM 元 素 。 


20.5 


beforeModel 





前 面 提 到 过 ,路 由 对 象 会 依次 调用 一 系列 钩子 方法 ,其 中 的 第 一 个 是 peforeModel。 这 个 钧 
子 非常 适合 用 来 在 请 求 数据 前 检查 应 用 的 状态 , 也 可 以 用 来 校 验 用 户 权 限 , 将 没有 访问 权限 的 用 
户 重 定向 到 其 他 页 面 。 














现在 尝试 在 首页 路 由 的 beforeModet 钧 子 中 对 用 户 进 行 重 定向 。 因 为 我 们 的 应 用 目前 还 没有 
首页 (有 兴趣 的 话 你 可 以 创建 一 个 仪表 人 台 页 面 作为 首页 )， 所 以 直接 将 访问 应 用 首页 的 用 户 重 定 
向 到 目击 记录 列表 页 。 

打开 app/routes/index.js， 在 其 中 添加 beforeModet 钩 子 : 


import Ember from 'ember'; 


























export default Ember.Route.extend({ 
beforeModel(){ 


} 
}); 




















this.transitionTo('sightings'); 


现在 ， 当 访问 http://localhost:4200/ 时 ， 浏 览 器 会 自动 跳 转 到 http://localhost:4200/sightings， 也 





就 是 由 app/templates/sightings/index.hbs 模 板 泻 染 出 的 目击 记录 列表 页 面 。 














jafterModeL 和 setupControLLer 这 两 个 钩子 没有 介绍 ， 因 为 在 Tracker 中 并 不 会 用 到 它 





们 。 建 立 











个 路 由 文件 ， 其 实 就 是 创建 了 Ember .Route 对 象 的 副本 ,并 和 覆盖 其 中 的 一 些 方法 ,这 























种 做 法 特别 像 使 用 Java 或 类 似 语 言 中 的 接口 。setupControtLtLer 钩 子 函 数 会 被 默认 执行 ,用 来 将 





model 属 





性 赋值 给 路 由 对 象 的 控制 器 。 








到 目前 为 止 ，Tracker 已 经 具备 了 基本 的 路 由 ， 这 些 路 由 能 够 大 致 体现 本 应 用 的 功能 : 首页 、 
目击 记录 列表 、 添 加 目击 记录 的 路 由 。 这 一 章 已 经 为 路 由 创建 了 模板 , 还 为 目击 记录 的 路 由 对 象 
添加 了 数据 ， 最 后 将 首页 重 定向 到 了 目击 记录 列表 页 。 我 们 成 功 地 开 了 一 个 好 头 ! 

下 一 章 会 介绍 Ember 的 模型 ( EmberModel )、 适 配器 、 计 算 属 性 以 及 存储 机 制 。 


20.6 



























































延展 阅读 : setupController 和 afterModel 





setupControLLer 钩 子 的 用 途 是 在 控制 器 中 添加 属性 供 模板 使 用 。 执 行 this，，super， 就 可 
以 在 给 controller 设 置 其 他 属性 的 同时 ， 执 行 默认 行为 给 controller 设 置 model 属 性 。” 




















CD 如 有 








没有 覆盖 setupCont roLLer， 它 会 执行 默认 行为 ， 即 为 控制 器 添加 modet 属 性 ， 值 是 从 模型 获取 的 数据 ; 如 果 覆 盖 




















了 setupControLLer， 则 默认 行为 将 不 会 被 执行 。 如 果 此 时 还 希望 使 用 modetL 属 性 ， 则 需要 显示 地 调用 this，super。 











一 一 译 者 注 
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setupController(controller, model) { 

this. super(controller, model); 

// this.controllerFor('[other controller]').set("[property name]", [value]); 
} 


afterModetL 钩 子 会 在 modetL 钩 子 返 回 的 Promise 对 象 被 resolve 时 执行 。 注 意 ， 在 一 些 特殊 情 
况 下 ，modetL 钧 子 可 能 不 会 被 调用 ， 因 为 在 调用 它 之 前 Promise 就 已 经 被 resolve 了 。 在 这 种 情况 
下 ， 由 于 afterModel 会 在 setupController 之 前 被 调用 ， 所 以 可 以 在 将 模型 数据 传 给 控制 器 之 
前 用 afterModel 来 校 验 数 据 的 完整 性 。 




















模型 和 数据 绑 定 








本 章 主 要 聚焦 在 应 用 的 数据 层 。 

到 目前 为 止 , 你 已 经 和 对 象 字 面 量 形式 的 数据 打 过 很 多 交道 了 。 前 面 已 经 介绍 过 如 何 创建 和 
修改 对 象 和 对 象 属性 , 以 及 如 何 用 函数 快速 生成 带 默 认 值 的 对 象 , 男 外 还 介绍 了 在 localStorage 
和 sessionStorage 中 存储 数据 的 方法 。 

在 Tracker 应 用 中 , 你 还 会 学 到 怎样 以 模型 的 形式 使 用 数据 。 模型 的 本 质 就 是 可 以 创建 包含 特 
属性 和 方法 的 对 象 的 函数 。 贯 穿 在 应 用 中 的 数据 有 了 模型 ， 便 有 了 结构 。 

Ember.0bject 是 应 用 中 最 基础 的 数据 结构 ，Ember 中 其 他 所 有 类 都 继承 于 它 。 在 应 用 运行 期 
间 ， 借 助 Ember.0bject 就 可 以 用 非常 简单 的 定义 和 命名 模式 完成 对 模型 实例 的 的 创建 、 检 索 、 
升级 或 销毁 。 

当然 ，Ember.0bject 提 供 的 功能 还 远 不 能 满足 一 款 现 代 应 用 的 需求 。 在 实际 应 用 中 ， 通 常 
需要 对 模型 数据 进行 持久 化 存储 ， 以 满足 业务 逻辑 中 对 数据 检索 或 保存 的 需求 。 

Ember Data 是 基于 Ember.0bject 构 建 的 JavaScript 库 ， 用 于 开发 模型 相关 的 功能 。Ember 
Data 提 供 了 一 些 基于 Ember.0bject 构 建 的 类 ， 这 些 类 对 各 种 复杂 的 数据 源 ( 包括 RESTful API、 
localStorage 、 静 态 数 据 等 ) 进行 了 抽象 。 

Ember Data 同 时 也 提供 了 基于 内 存 的 存储 store， 后 面 所 有 对 数据 的 增删 改 查 都 通过 store 
进行 操作 。 


21.1 定义 模型 


Ember CLI 已 经 加 载 了 Ember Data 库 ， 所 以 可 以 直接 开始 创建 模型 。 

上 一 章 使 用 Ember 的 生成 器 ember g route [路 由 名 称 ] 创 建 了 路 由 和 相关 文件 ， 这 里 则 使 用 
同样 的 方法 创建 模型 ， 命 令 是 ember g model [模型 名 称 ]。 

分 别 创建 路 由 所 需 的 神秘 生物 、 目 击 记 录 和 目击 者 模型 : 


ember g model cryptid 
ember g model sighting 
ember g model witness 


神秘 生物 模型 定义 在 app/models/cryptid.js 文 件 中 。 打 开 这 个 文件 ， 在 其 中 添加 一 些 属性 : 名 
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称 ( name )、 神 秘 生物 类 型 ( 物种 ，cryptidType )、 档 案 图 片 (profileImg ) 和 目击 记录 
(sightings ): 
import DS from "ember-data ' ; 
export default DS.ModeL.extend ({ 
name: DS.attr('string'), 
cryptidType: DS.attr('string'), 


profileImg: DS.attr('string'), 
sightings: DS.hasMany('sighting') 


}); 

DS( 即 Data Store ) 是 Ember Data 提 供 的 对 象 ， 它 提供 了 一 个 attr 方 法 用 来 为 模型 定义 属性 。 
数据 源 传人 的 数据 会 通过 attr 方 法 返回 : 如 果 调 用 attr 时 传人 了 类 型 作为 参数 ， 那 么 它 返 回 的 
数据 将 被 强制 转化 成 该 类 型 ， 如 果 没 传 参 数 ， 数 据 则 会 保持 原样 。 

Ember 内 建 了 一 些 数据 类 型 : 字符 串 (string )、 数 字 ( number )、 布尔 值 (boolean ) 以 及 日 
期 (date )。 此 外 ， 也 可 以 通过 transforms 方 法 自 定 义 数据 类 型 ， 这 个 知识 点 会 在 下 一 章 中 介绍 。 

attr 的 第 二 个 参数 是 可 选 的 ， 可 以 在 这 个 参数 中 使 用 defaultValue 定 义 属性 的 默认 值 。 例如 : 


name: DS.attr('string', {defaultValue: 'Bob'}), 

isNew: DS.attr('boolean', {defaultValue: true}), 
createdAt: DS.attr('date', {defaultValue: new Date()}), 
numOfChildren: DS.attr('number', {defaultValue: 1}) 


这 里 将 神秘 生物 的 名 称 、 类 型 、 图 片 等 属性 定义 为 字符 串 类 型 。( 为 什么 图 片 也 是 字符 串 ? 
因为 这 里 存储 的 是 图 片 的 路 径 ， 而 不 是 图 片 本 身 。) 

sightings 属 性 则 用 了 不 同 的 方法 来 定义 数据 类 型 : hasMany。hasMany 是 Ember Data 提 供 的 
关系 方法 之 一 ， 用 于 定义 关联 关系 。 当 通过 RESTful API 查 询 神秘 生物 时 ， 相 关联 的 目击 记录 会 
以 iq 数 组 的 形式 返回 ， 每 个 id 代表 一 条 目击 记录 实例 。 

Ember Data 提 供 了 多 种 描述 关联 关系 的 方法 : 一 对 一 、 一 对 多 、 多 对 多 。 














































































































关 系 关联 模型 被 关联 模型 
一 对 一 DS.hasOne DS.belongsTo 
一 对 多 DS.hasMany DS.belongsTo 
多 对 多 DS.hasMany DS.hasMany 

















在 定义 关系 时 , 第 一 个 参数 是 待 关联 的 模型 名 称 , 第 二 个 参数 与 attr 的 第 二 个 参数 一 样 , 也 
是 一 个 可 选 的 配置 对 象 ， 它 包含 一 个 async 属 性 ， 默 认 值 为 true 。 在 Tracker 应 用 中 ， 每 个 神秘 
生物 对 应 多 条 目击 记录 ( 好奇 为 什么 会 有 这 么 多 人 见 过 它们 )。 

在 定义 了 关联 关系 后 ， 当 从 服务 端 查询 特定 的 模型 数据 时 也 会 同时 查询 关联 模型 的 数据 。 例 
如 ， 当 查询 神秘 生物 时 ,会 同时 查询 相关 联 的 目击 记录 。 反 之 亦 然 , 每 条 目击 记录 也 会 关联 到 一 
种 神秘 生物 。 如 果 async 参 数 配 置 为 true( 默认 值 )， 则 针对 模型 数据 的 查询 和 针对 关联 数据 的 
查询 会 分 别 发 送 到 各 自 API 接 口 的 请 求 。 
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如 果 API 支 持 一 次 性 发 送 全 部 数据 , 可 以 将 async 设 置 为 false。 在 Tracker 应 用 中 就 用 默认 值 
true。 
接 下 来 修改 目击 者 模型 app/models/witness.js， 为 它 添加 一 些 属性 : 


import DS from 'ember-data'; 








export default DS.Model .extend({ 
fName: DS.attr('string'), 
LName: DS.attr('string'), 
email: DS.attr('string'), 
sightings: DS.hasMany('sighting') 
}); 
在 这 段 代码 中 定义 了 目击 者 对 象 ， 它 包含 了 姓 (LName )、 和 名 ( fName )、 邮 箱 ( email ) 和 目 
击 记录 (sightings， 与 目击 者 是 多 对 多 的 关系 ) 等 属性 。 
最 后 , 修改 目击 记录 模型 app/models/sighting.js。 对 于 每 条 目击 记录 需要 关注 的 问题 有 : 这 
那 种 生物 ， 目 击 的 时 间 、 地 点 、 目 击 者 分 别 是 什么 , 这 次 目击 被 记录 的 日 期 。 在 记录 中 加 入 这 


时 性 : 


import DS from 'ember-data'; 
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LAY 
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Il 








export default DS.Model .extend({ 
Location: DS.attr('string'), 
createdAt: DS.attr('date'), 
sightedAt: DS.attr('date'), 
cryptid: DS.belongsTo('cryptid'), 
witnesses: DS.hasMany('witness ' ) 


}); 

定义 目击 记录 模型 和 定义 其 他 模型 并 无 不 同 ， 都 是 使 用 字符 串 描 述 属性 。 目 击 记 录 中 的 
Location 属 性 是 需要 用 户 手动 输入 的 ,而 createdAt 和 sightedAt 会 根据 数据 录入 数据 库 的 时 间 
在 服务 端 自 动 添加 。 

在 定义 cryptid 属 性 时 ， 用 到 了 新 方法 DS,betongsTo('cryptid' ) ， 这 个 方法 用 来 描述 一 
对 多 的 关联 关系 。 在 应 用 中 , 一 个 神秘 生物 实例 对 应 多 条 目击 记录 一 一 这 也 很 好 理解 ， 毕 竟 一 种 
生物 可 能 被 看 到 多 次 。 


21.2 创建 记录 


在 应 用 初始 化 时 ，Ember Data 会 创建 用 于 本 地 存储 的 store 对 象 。this ,store 对 象 包 含 了 对 
模型 记录 进行 创建 、 查 询 、 修 改 、 删 除 等 操作 的 方法 。 这 个 store 对 象 会 被 注入 到 所 有 的 路 由 、 
控制 器 以 及 组 件 中 ， 在 路 由 等 对 象 的 相关 方法 中 可 以 通过 this 访 问 store。 

创建 记录 的 方法 是 this.store.createRecord， 它 需要 两 个 参数 : 模型 名 称 ( 字符 串 ) 和 
记录 数据 ( 对 象 )。 

打开 app.routes/sightings.js 文 件 ， 删除 其 中 的 模拟 数据 ,然后 添加 三 条 新 的 目击 记录 ,这 些 新 
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import Ember from "ember '; 


记录 中 包含 了 Location 属 性 (字符 串 ) 和 sightedAt 


FE 二 








本 
ol 





export default Ember.Route.extend({ 
model() { 


性 (通过 new Date 创 建 的 Date 对 象 ): 





Location: 


Let record1 = this.store.createRecord('sighting', { 
'Atlanta', 

sightedAt: new Date('2016-02-09') 

}); 


Let record2 = this.store.createRecord('sighting', { 
Location: 'Calloway', 

sightedAt: new Date('2016-03-14') 
}); 


Let record3 = this.store.createRecord('sighting', { 
Location: 'Asilomar', 

sightedAt: new Date('2016-03-21') 
}); 


} 
}); 


return [recordl, record2, record3]; 














在 第 20 章 中 ,目击 记录 模型 同样 返回 了 一 个 数组 ,但 是 现在 情况 略 有 不 同 , 数组 中 不 
单 的 JavaScript 对 象 ， 而 是 目击 记录 的 实例 。 执 行 ember server 启 动 服务 器 ， 访 问 
http://localhost:4200/sightings 查 看 新 添加 的 记录 ( 如 图 21-1 所 示 )。 
































是 简 
从 这 个 例子 可 以 看 出 , 创建 Ember Data 模 型 与 创建 普通 的 JavaScript 对 象 并 没有 什么 不 同 , 但 
使 用 Ember Data 模 型 的 好 处 是 它 提 供 了 许多 额外 的 方法 ， 例 如 get 和 set。 
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21.3 get 和 set 

©00 /rer 二 
< CC DD localhost4200/sightings Me 
ee 一 RO Elements Console Sources Network Timeline Profiles » Se 

Q@ tp Y 国 Preservelog 

er 3 Regex © Hide network messages 
Sightings 图 | Erors wamings Info Logs Debug Handled 
Atlanta - Mon Feb 08 2016 19:00:00 GMT-0500 (EST error 


DEBUG: Ember 3 2.4.4 ember,debug,js:6395 
Calloway - Sun Mar 13 2016 20:00:00 GMT-0400 (EDT DEBUG: Ember Data : 2,4.3 ember. debug, is:6395 


DEBUG: jQuery 直人 和 3 
Asilomar - Sun Mar 20 2016 20:00:00 GMT-0400 (EDT) 


DEBUG: 一 一 一 一 -一 -一 


ember, debug, js:6395 
ember. debug, js:6395 








图 21-1 创建 





记录 


HL 





21.3 get 和 set 


Ember.0bject 是 Ember Data 模 型 记录 实例 的 核心 ， 其 中 就 定义 了 get 和 set 方 法 。 不 同 于 大 
部 分 语言 , JavaScript 不 会 在 对 对 和 象 实例 取 值 或 赋值 时 强制 要 求 使 用 getter 或 setter 方 法 。 于 是 Ember 
实现 了 一 套 与 getter 和 setter 类 似 的 逻辑 ， 并 且 强 制 使 用 ， 目 的 是 能 够 在 属性 发 生 改 变 时 执行 特定 











的 函数 。 进 一 步 讲 ，Ember 会 在 调用 set 方 法 时 触发 事件 。 男 外 ， 使 用 getter 可 以 更 加 明确 读 取 属 


性 的 意图 。 








get 方 法 只 接受 一 个 参数 ， 即 属性 名 称 ， 它 返回 属性 的 值 。 用 app/routes/sightings.js 模 型 试 试 。 





import Ember from 'ember'; 


export default Ember.Route.extend({ 
model() { 
let recordl = this.store.createRecord('sighting', { 
Location: 'Atlanta', 
sightedAt: new Date('2016-02-09') 
}); 


console.log("Record 1 Location: "+ recordl.get('location') ); 


return [recordl, record2, record3]; 
} 
}); 


将 开发 者 工具 切换 到 Console 标 签 , 保 持 开启 不 要 关闭 ,然后 刷新 浏览 器 ,查看 控制 台中 Ember 














打印 的 日 志 信息 ， 最 后 一 条 是 “Record 1 location: Atlanta”?。 
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继续 编辑 app/routes/sightings.js ， 在 创建 记录 和 打印 日 志 之 间 的 位 置 使 用 set 方 法 修改 


二 


= 起 
可 [e] 























三 


record1 的 Location 


import Ember from 'ember'; 


export default Ember.Route.extend({ 


model() { 
let recordl = this.store.createRecord('sighting', { 
Location: 'Atlanta', 
sightedAt: new Date('2016-02-09') 
}); 
recordl.set('location', 'Paris, France'); 
console.log("Record 1 Location: " + recordl.get('location')); 


return [recordl, record2, record3]; 





}); 
新 浏览 器 , 在 控制 台 能 看 到 修改 之 后 的 值 :“ ion: Pari ”( 如 图 21-2 所 示 
刷新 浏览 器 , 在 控制 台 能 看 到 修改 之 后 的 值 :“Record 1 location: Paris, France”( 如 图 21-2 所 示 )。 
©00 /rker 国 
人 © localhost:4200/sightings 三 
Tracker TestUink TestLink 民 帅 Elements Console Sources Network » X 
Q@ 可 top v Preserve log 
i Regex © Hide network messages 
Sightings (WD Erors Warnings Info Logs Debug Handled 
Paris, France - Mon Feb 08 2016 19:00:00 GMT-0500 (EST) re gt ember. debug, js:6395 
DEBUG: Ember : 2.4.4 ember. debug. js:6395 
Calloway - Sun Mar 13 2016 20:00:00 GMT-0400 (EDT) DEBUG: Ember Data : 2.4.3 ember, debug, is:6395 
DEBUG: jQuery :2.2.3 ember. debug. is:6395 
Asilomar - Sun Mar 20 2016 20:00:00 GMT-0400 (EDT) De 
Ember Inspector Active YM7734:86 
Record 1 location: Paris, France sightings. is:9 











图 21-2 ”通过 set 设 置 location 属 性 








pl 








这 只 是 get 和 set 最 基本 的 用 法 。 如 果 要 修改 的 模型 记录 的 属性 是 通过 hasMany 或 belongsTo 
定义 的 ,那么 可 以 使 用 其 他 模型 记录 为 该 记录 的 属性 赋值 , 这 样 两 个 模型 之 间 就 会 建立 关联 关系 。 
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21.4 计算 属性 
模型 的 计算 属性 对 模板 和 组 件 极 为 重要 。 可 以 使 用 Ember.computed 方 法 定义 计算 属性 ， 它 
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会 对 一 些 属 性 的 值 进行 计算 并 返回 结果 。 比 如 ， 调 用 下 面 的 代码 ， 计 算 属性 会 返回 first_name 
盟 性 值 的 小 写 形式 : 


Ember.computed('first name', function(){ 
return this.get('first name').toLowerCase(); 


}); 


在 这 个 例子 中 , Ember.computed 就 像 事件 监听 器 一 样 ,时 刻 监听 着 first_name 属 性 的 变化 。 
但 是 你 既 不 需要 定义 监听 器 或 者 手动 触发 事件 , 也 不 需要 对 原 有 的 first_name 属 性 做 任何 修改 ， 
要 做 的 只 是 添加 一 个 计算 属性 。 

计算 属性 在 Ember 中 的 运用 相当 广泛 ， 第 25 章 还 会 为 组 件 创建 计算 属性 。 计 算 属 性 既 可 以 像 
上 面 的 例子 一 样 作为 装饰 器 用 于 视图 或 组 件 中 ， 也 可 以 用 于 在 模型 中 检索 深层 数据 。 

“装饰 ”的 意思 是 将 数据 按 某 种 形式 进行 格式 化 ， 例 如 上 面 例子 中 的 大 小 写 转换 。API 中 返回 
的 数据 通常 都 需要 经 过 格式 转化 才能 使 用 。 装 饰 嚣 本质 上 是 个 函数 , 它 将 输入 的 数据 按 应 用 ( 主 
要 是 视图 ) 的 需求 转化 成 对 象 或 者 对 和 象 数 组 的 形式 。 一 般 来 讲 ,数据 格式 化 的 结果 不 会 返 给 数据 
库 ,， 所 以 通常 在 控制 器 中 使 用 装饰 器 。 除 非 数据 在 所 有 页 面 中 都 需要 使 用 , 并 且 在 数据 库 中 也 没 
有 经 过 格式 化 。 
辑 app/models/witness.js 文 件 ， 为 目击 者 模型 添加 一 个 fuLLName 计 算 属 性 。 


import Ember from 'ember'; 
import DS from 'ember-data ' ; 
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export default DS.Model .extend({ 
fName: DS.attr('string'), 
LName: DS.attr('string'), 
email: DS.attr('string'), 
sightings: DS.hasMany('sighting'), 
fullName: Ember.computed('fName', 'lName', function(){ 
return this.get('fName') + ' ' + this.get('lName'); 
}) 
}); 


( 如 果 编 译 服务 报错 ， 请 检查 一 下 是 不 是 漏 掉 了 sightings 属 性 后 面 的 人 逗号 ， 这 是 一 个 常 犯 
的 错误 。) 
为 目击 者 模型 添加 的 这 个 属性 本 身 是 一 个 函数 ， 它 会 在 fName 或 LName 发 生 改 变 时 执行 。 计 
算 属 性 可 以 接受 任意 多 个 参数 , 除了 最 后 一 个 参数 是 用 来 返回 计算 结果 的 回调 函数 外 ,其余 参数 
都 是 触发 回调 函数 的 属性 名 。 

修改 app/routes/witnessesjs 文 件 ， 添 加 一 条 目击 者 记录 ， 测 试 刚 添加 的 计算 属性 能 和 否 正 常 工作 : 


import Ember from 'ember'; 










































































export default Ember.Route.extend({ 


model() { 
let witnessRecord = this.store.createRecord('witness', { 
fName: "Todd", 


LName: "Gandee", 
email: "fake@bignerdranch.com" 
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}); 
return [witnessRecord]; 
} 
}); 


此 外 ， 为 了 使 目击 者 数据 在 页 面 中 展示 ， 需 要 修改 app/templates/witnesses.hbs 模 板 ， 在 其 中 
使 用 {{#each}} 进 行 数 据 和 迭代 。{{#eachj} 的 用 法 和 在 app/templates/sightings/index.hbs 中 的 用 法 


相同 。 
{foutlet}} 


<h1>Witnesses</h1> 
<div class="row"> 
{{#each model as |witness|}} 
<div class="col-xs-12 col-sm-6 col-md-4"> 
<div class="well"> 
<div class="thumbnail"> 
<div class="caption"> 
<h3>{{witness.fullName}}</h3> 
<div class="panel panel-danger"> 
<div class="panel-heading">Sightings</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
{{/each}} 


</div> 


访问 http://localhost:4200/witnesses 页 面 查看 效果 ( 如 图 21-3 所 示 )。 
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所 ed localhost:4200/witnesses/ :3 
Toke mal Mal [中 Eements Console Sources Network » : 
Q@ tp v Preserve log 
t Regex © Hide network messages 
Witnesses 图 Emors Warnings Info Logs Debug Handled 
DEBUG: -- 一 一 -一 -一 一 -一 -一 -一 -一 -一 ember. debug., is:6395 
DEBUG: Ember :2.4.4 ember. debug. is:6395 
DEBUG: Ember Data : 2.4.3 ember. debug., is:6395 


Wg nee DEBUG: jQuery 2.2.3 ember. debug. js:6395 
Sightings DEBUG: ———-——-————————-—--—-——--——- ember.debug,is:6395 


:| Console Animations 


图 21-3 ”目击 者 列表 
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页 面 中 展示 了 目击 者 列表 (虽然 目前 只 有 一 条 记录 ) 和 通过 计算 属性 得 到 的 目击 者 姓名 (在 
添加 目击 者 记录 时 生成 的 )。 可 以 尝试 在 nodeL 函 数 返 回 之 前 使 用 witnessRecord. set 修改 记录 
中 的 姓 或 名 ， 然 后 查看 修改 后 的 效果 。 

经 过 这 几 章 的 学 习 ， 你 已 经 对 Ember 有 了 不 少 了 解 一 一 你 学 会 了 定义 模型 、 创 建 记 录 、 创 建 
计算 属性 、 设 置 和 获取 属性 值 等 。 很 快 你 还 会 学 习 如 何 使 用 API 对 记录 进行 增删 改 查 操作 。 

下 一 章 将 介绍 如 何 对 数据 使 用 适配器 、 序 列 化 器 和 变换 器 ,用 于 将 数据 模型 与 服务 端 数据 进 
行 关联 。 


21.5 延展 阅读 : 检索 数据 


前 面 提 到 过 , store 负 责 管理 和 检索 数据 。 在 上 一 章 中 , 我 们 在 目击 记录 路 由 (SightingRoute ) 
的 model 回 调 中 以 数组 的 形式 返回 数据 ,而 在 下 一 章 中 , 我 们 将 在 路 由 中 使 用 this.store,findALL 
等 检索 方法 ， 以 Promise 的 形式 返回 数据 。 

下 表 是 Ember 提 供 的 数据 检索 方法 ,用 于 从 API 获 取 数 据 , 将 其 存储 在 内 存 ,， 并 返回 给 调 
用 者 。 















































请 求 类 型 检索 全 部 数据 检索 单条 数据 
获取 远程 和 本 地 数据 findALL findRecord 
只 获取 本 地 数据 peekALL peekRecord 
获取 过 滤 后 的 数据 query queryRecord 




















Ember 提 供 了 多 种 获取 数据 的 模式 : 远程 和 本 地 、 仅 本 地 、 经 过 过 滤 的 远程 和 本 地 。 其 中 最 
常用 的 是 findALL 和 findRecord， 它 们 接受 的 参数 与 API 需 要 的 参数 类 似 ， 因 为 Ember Data 也 是 
通过 请 求 项 API 接 口 进行 数据 查询 的 。 

findALL 方 法 唯一 的 参数 就 是 模型 名 称 。 例 如 , 当 需 要 查询 全 部 目击 者 时 , 可 以 使 用 findALL 
('witness'), 注意 这 里 的 参数 是 单数 形式 ( 即 参数 是 模型 名 )。 但 是 在 进行 Ajax 请 求 时 ，Ember 
Data 会 自动 以 它 的 复数 形式 构造 URL 一 一 /witnesses/。 

findRecord 比 findALL 多 一 个 参数 ， 用 来 指示 记录 的 标识 符 ， 通 常 指 id 字 段 。 例 如 当 调用 
this,.store.findRecord('witness'，5) 时 会 向 /witnesses/5 发 起 数据 请 求 。 

peekALL 和 peekRecord 需 要 的 参数 和 findALL、findRecord 相 同 。 不 同 的 是 ， 调 用 它们 会 
直接 返回 数据 ， 而 不 是 Promise 对 象 。 

从 API 查 询 数据 也 是 表单 请 求 的 一 种 形式 。 如 果 API 接 口 支持 查询 参数 ， 那 么 就 可 以 使 用 
query 和 queryRecord。 和 其 他 方法 一 样 ， 该 方法 的 第 一 个 参数 也 是 模型 名 称 ， 第 二 个 参数 是 一 
个 对 象 ， 其 中 的 键 值 对 会 在 发 送 请 求 时 转化 成 查询 字符 串 。 调 用 query 会 返回 所 有 符合 条 件 的 数 
据 。 如 果 你 确定 结果 只 有 一 条 数据 则 可 以 使 用 queryRecord。 

例如 ， 调 用 下 面 这 行 代码 : 


this.store.query('user',{fName: "todd"}) 
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会 产生 /users/?f_name=todd 这 样 的 请 求 。 或 者 : 
this.store.queryRecord('user', {email: 'me@test.com'}) 
产生 的 请 求 是 : /users?email=me@test .com。 


store 中 的 这 些 方法 全 都 使 用 了 适配器 ， 这 部 分 内 容 在 下 一 章 会 详细 介绍 。 


21.6 ”延展 阅读 : 保存 或 删除 数据 


在 增加 和 查询 之 后 ， 接 下 来 要 学 习 的 逻辑 是 修改 和 删除 。( 一 般 记 作 CRUD，create 、read、 
update 、destory， 即 创建 、 查 询 、 修 改 、 删 除 ) “模型 实例 中 包含 save 和 destoryRecord 两 个 方 
法 ， 可 用 于 通过 适配器 发 送 请 求 ， 从 而 更 新 数据 存储 。 它 们 的 返回 值 是 一 个 Promise 对 象 ， 所 以 
我 们 在 ,then 中 处 理 返回 的 数据 。 

前 面 曾经 讲 过 ， 可 以 通过 set 方 法 对 模型 记录 的 属性 进行 修改 。 但 set 只 会 修改 本 地 的 值 ， 
所 以 在 修改 后 本 地 数据 与 服务 端 数 据 之 间 会 产生 差异 。 为 了 解决 这 个 问题 ， 在 使 用 set 后 还 需 对 
数据 进行 保存 。 保 存 数据 可 以 通过 modelRecord.save 实 现 。 在 保存 时 , 模型 会 通过 store 向 API 
接口 发 送 请 求 ， 请 求 的 类 型 为 P0ST 或 PUT， 根 据 记录 的 状态 决定 。 

这 里 没有 提 到 查询 ，store 在 发 送 查 询 请 求 时 会 使 用 get 方 法 〈 请求 类 型 为 GET )。 而 在 保存 
数据 时 ， 如 果 该 数据 在 服务 端 已 经 存在 (修改 数据 ) 就 使 用 PUT, 反之 (新 增 数据 ) 则 使 用 POST。 

同样 ， 在 调用 createRecord 方 法 时 ， 数 据 只 添加 到 内 存 中 ， 而 没有 保存 到 数据 库 ， 所 以 还 
需要 调用 save 方 法 来 创建 和 更 新 服务 端 数据 。” 

最 后 一 个 操作 是 删除 记录 。 与 获取 和 更 新 记录 的 方法 相似 ，modelRecord.destroyRecord 
使 用 请 求 方法 (请求 类 型 是 DELETE ) 来 删除 服务 端 记 录 。 与 save 类 似 ，destroyRecord 实 际 上 
也 集成 了 两 步 操作 : deleteRecord 和 save。 这 里 的 deleteRerord 方 法 只 是 从 内 存 中 删除 数据 。 
相 比 而 言 ， 自 然 是 destroyRecord 更 加 实用 ， 它 只 需要 一 行 代码 就 可 以 完成 两 步 操 作 。 


21.7 ”初级 挑战 :修改 计算 属性 


目前 的 姓名 属性 只 简单 地 对 fName 和 tName 进 行 了 拼接 。 请 对 它 进 行 一 些 修改 ,使 用 email 
和 fName 属 性 ， 生 成 与 Todd - tgandee@bignerdranch.com 相 同 格式 的 字符 串 进行 展示 。 


21.8 中 级 挑战 : 对 新 的 目击 记录 进行 标记 


为 目击 记录 模型 添加 一 个 布尔 属性 : ijsNew， 默认 值 defaultValue 为 false。 在 已 经 创建 的 
目击 记录 中 任 选 一 条 ， 将 其 ijsNew 属 性 设置 为 true。 打 开 Chrome 的 调试 器 ， 查 看 sightings 路 由 ， 















































































































































Q@ 中 文 常用 “增删 改 查 ">， 即 增加 、 删 除 、 修 改 、 查 询 。 译 者 注 
@ 这 里 原文 中 没有 明确 指出 ， 事 实 上 save 有 两 种 用 法 : 带 参 数 和 不 带 参 妆 
功能 ， 可 以 查询 API 文 档 做 进一步 了 解 。 一 一 译 者 注 



































上 参数 的 用 法 集合 了 set 和 save 的 
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能 看 到 在 所 有 的 数据 中 只 有 一 条 记录 的 isNew 属 怕 








21.9 ”高 级 挑战 : 添加 称呼 


目击 者 需要 一 个 合适 的 称呼 ， 例 如 : Gandee 先 生 。 请 在 目击 者 模型 中 添加 title 
一 个 有 趣 并 且 可 以 通用 的 称呼 作为 默认 值 。 在 所 有 记录 中 任意 选 一 条 不 做 修改 , 同时 为 其 他 各 条 








记录 分 别 添加 title 属 性 。 然 后 添加 一 个 计算 属 怕 








FE 值 是 true。? 





来 展示 完整 的 称呼 〈 姓 + 称呼 )。 


属性 ， 并 想 


维基 百科 上 有 一 个 关于 称呼 的 列表 非常 不 错 : en.wikipedia.org/wikiTitle, “Gandee 超 人 ”看 


起 来 就 不 赖 ! 











中 事实 上 这 里 不 能 使 月 











误 。 一 — 译 者 注 





isNew 作 为 





属 怕 





FE 名， 因为 Ember 模 型 


PP 本 身 已 经 包含 了 isNew 属 性 ， 




















数据 一 一 适配器 、 序 列 化 器 
和 变换 器 


























几乎 每 一 款 应 用 都 需要 与 接口 进行 数据 交互 , 因此 将 应 用 连接 到 数据 源 也 是 应 用 开发 中 的 重 
要 环节 。 如 车 不 然 ， 哪怕 应 用 拥有 再 复杂 的 表格 、 列 表 或 是 事件 系统 ， 也 都 只 能 是 一 片 空 白 ， 因 
为 没有 数据 可 以 填充 。 

这 一 章 将 会 介绍 在 Ember 中 连接 数据 源 的 一 些 基础 知识 。 你 将 会 用 到 专 为 这 本 书 开发 的 API 
接口 ， 另 外 还 会 为 应 用 创建 适配器 。 

与 其 他 几 章 略 有 不 同 ,这 一 章 的 代码 会 比较 少 ， 而 介绍 会 比较 多 。 本 章 内 容 涉 及 与 服务 端 和 
数据 库 的 交互 , 通常 它们 并 不 受 前 端 开发 人 员 的 控制 ,这 也 更 接近 真实 的 开发 场景 。 下 一 章 会 继 
续 常规 的 编码 之 旅 。 

上 一 章 曾 提 到 过 ,适配器 是 应 用 的 译 者 。 在 与 数据 源 通信 时 ,应 用 可 能 需要 以 多 种 方式 发 送 
和 接受 数据 。Ember Data 内 置 了 JSONAPI 适 配器 和 通用 的 “RESTful” API 适 配器 , 它们 可 以 处 理 大 
多 数 常见 的 情况 。 

JSONAPIAdapter 用 于 连接 数据 源 ， 它 返回 经 过 格式 化 的 数据 。RESTAdapter 则 提供 了 一 些 方 
法 ， 用 来 与 Rails 或 Rails 的 ActiveRecord 搬 件 提 供 的 API 通 信 。 

创立 JSONAPI 标 准 的 目的 是 提供 一 种 可 预测 并 且 可 扩展 的 模式 用 来 与 服务 器 交换 数据 。 由 于 
目前 有 许多 服务 端 语言 ， 每 种 语言 又 都 有 自己 惯用 的 API 对 象 模 型 ， 所 以 JSONAPI 被 设计 成 一 种 
可 以 连接 各 种 语言 的 桥梁 ,这样 哪怕 服务 端 技 术 发 生变 更 也 不 会 影响 前 端 应 用 的 正常 工作 。 可 以 
访问 JSONAPI 官 网 jsonapi.org 了 解 更 多 信息 。 

这 一 章 还 会 介绍 一 些 安全 问题 ,也 就 是 序列 化 器 , 它 是 适 配 流程 中 的 转化 层 。 最 后 会 介绍 变 
换 器 ， 它 的 功能 是 把 数据 强制 转化 成 模型 所 期 望 的 格式 。 适 配器 、 序 列 化 器 和 变换 器 互相 协作 ， 
它们 之 间 的 关系 如 图 22-1 所 示 。 
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Web 服 务 


提供 JSON 格 式 的 数据 


发 送 Ajax 
请 求 


findAll) 经 过 序列 化 的 有 效 载荷 Ee 








findRecord 属性 名 变换 
normalize(}) 
' 本 地 数据 
添加 到 Store 中 > i 
: 全 属性 
findAll 
(modelName) ~ 
findRecord 
(model, :id) 反 序 列 化 
路 由 /控制 器 1 国 例 ' 
1 1 
| 请 求 一 一 | 
this.store.findAIl() I 1 
this.store.findRecord!) 和 次 i 寺 |! 
1 1 
1 1 





和 


图 22-1 适配器 、 序 列 化 器 和 变换 器 
在 本 章 结束 时 ，Tracker 的 页 面 应 如 图 22-2 所 示 。 
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图 22-2 ”本 章 结 束 时 Tracker 的 页 面 
适配器 





自 截 图 


©00® /0 mck 
€ DC (localhost:4200/witnesses/ m 
Tracker Testiink TeatUnk 民 遇 Elements Console Sources Network » : 
Q@ 可 top v 目 Presevelog 
Regex © Hide network messages 
Witnesses CY Erors Warnings Info Logs Debug Handled 
DEBUG: 一 一 -一 一 一 一 一 一 一 一 一 一 一 ember,debug,is:6395 
DEBUG: Ember 3 2.4.4 ember, debug. is:6395 
和 pH DEBUG: Ember Data : 2.4.3 ember, debug. jis:6395 
Todd Gandee Chris Aquino 机 

DEBUG: jQuery EE ember,. debug. js:6395 
Sightings Sightings DEBUG: 一 一 一 一 一 一 一 一 一 一 一 一 ember, debug. is:6395 


E 架 时 设计 了 一 些 特 定 的 模式 , 适配器 占据 了 其 中 一 大 部 分 。store 


使 用 JSONAPIAdapter 与 REST API 进 行 通信 。 所 有 请 求 都 携带 模型 名 称 和 属性 数据 ， 它 们 会 被 发 
送 到 目标 域名 下 的 某 个 路 径 。 

JSONAPIAdapter 需 要 host 和 namespace 两 个 属性 的 值 ， 以 便 生 成 Ajax 请 求 的 URL。 接 着 适 
配器 会 发 出 Ajax 请 求 ， 接 受 JSON 响 应 ， 但 响应 数据 必须 具有 特定 的 结构 。 举 个 例子 ， 向 目击 者 


列表 API 发 起 GET 请 求 ， 收 到 的 响应 结构 应 该 是 这 样 


{ 











TT 


的 : 


"links": { 


"self": 


}, 


"data": [ 


{ 


"id": "5556013e89ad2a030066f6e0", 
"type": "witnesses", 
"attributes": { 

"lname": "Gandee", 

"fname": "Todd" 
}, 
"links": { 

"self": "/api/witnesses/5556013e89ad2a030066f6e0" 
}, 
"relationships": { 

"sightings": { 


"http://bnr-tracker-api.herokuapp.com/api/witnesses" 











"data": [], 

"links": { 
"self": 
"/api/witnesses/5556013e89ad2a030066f6e0/relationships/sightings" 


响应 中 的 每 条 数据 都 包含 一 个 对 象 的 type 属 性 , 它 是 请 求 的 模型 名 称 , 用 于 解析 模型 的 类 型 。 
另外 每 条 数据 也 都 包含 id 属性 ， 它 是 数据 的 主键 ， 用 于 区 分 不 同 的 记录 。 

首先 创建 一 个 适配器 : 

ember g adapter application 

应 用 要 与 Big Nerd Ranch Tracker API 进 行 通信 。 前 面 提 到 过 ， 传 人 JSONAPIAdapter 的 参数 需 
要 包含 目标 主机 的 URL ( host ) 和 命名 空间 ( namespace ), 命名 空间 会 在 发 送 请 求 时 附加 到 URL 
的 最 后 。 打 开 app/adapters/application.js， 修 改 其 中 的 host 和 namespace 属 性 。 


import DS from 'ember-data ' ; 





























export default DS.JSONAPIAdapter.extend({ 
host: 'https://bnr-tracker-api.herokuapp.com', 
namespace: 'api' 


}); 

与 Ember 中 的 其 他 类 一 样 ， 适 配器 也 具有 一 定 的 命名 规则 ， 同 时 它 也 可 以 根据 模型 API 的 需 
求 进 行 定制 。 这 样 做 的 好 处 是 , 可 以 使 用 一 个 定制 的 适配器 处 理 非 标准 的 数据 ， 而 不 需要 让 全 部 
模型 回 边缘 案例 妥协 。 

写 在 app/adapters/application.js 中 的 配置 是 全 局 配置 ， 它 对 所 有 的 数据 请 求 都 有 效 。 在 Tracker 
应 用 中 使 用 这 个 配置 已 经 足够 了 ， 因 为 所 有 API 使 用 的 都 是 相同 的 主机 名 和 命名 空间 。 但 假如 这 
里 的 目击 者 模型 使 用 的 API 主 机 名 或 命名 空间 与 其 他 API 不 同 ， 那 么 就 需要 创建 一 个 app/adapters/ 
witness,js 文 件 ， 并 在 其 中 添加 供 目 击 者 API 使 用 的 专用 配置 。 

接 下 来 需要 通过 store 向 API 接 口 发 送 数据 请 求 。 目击 者 和 神秘 生物 的 API 已 经 提前 准备 好 了 。 

打开 appmoutes/witnesses,js， 将 其 中 的 模拟 数据 替换 成 上 一 章 讲 的 数据 检索 方法 。 
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return this.store.findAll('witness'); 
} 
}); 
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在 终端 中 执行 ember server 命 令 重 启 应 用 ， 然 后 在 浏览 器 中 访问 http:Vlocalhost :4200/witnesses 
( 如 图 22-3 所 示 )。 


O08 /0 Tecker 





“7 C localhost:4200/witnesses/ 到 下 
Tiacker TestUnk TestUnk [R 中 | Elements Console Sources Network » pe 
人 @ top v Preserve log 
Fitte Regex Hide network messages 
Witnesses DY eos Waninos mo Logs pebug Handled 
ee ember, debug, js:6395 
DEBUG: Emb: 2,4.4 ember. debug. js:6395 
, H DEBUG: Ember Data : 2.4.3 ember,. debug, js:6395 
Todd Gandee Chris Aquino DEBUG: jQuery ember. debug, js:6395 
Sightings Sightings OE: seni ember. debug. is:6395 
Jonathan Martin 
Sightings 
:Console Animations X 


图 22-3 ”目击 者 列表 


跟 Ember 的 大 多 数 生 命 周 期 流程 一 样 ， 适 配器 中 也 包含 了 许多 方法 ， 用 于 从 API 获 取 数 据 然 
后 发 送 到 store 以 及 路 由 、 控 制 器 和 模板 。 定 义 特殊 适配器 (如 JSONAPIAdapter ) 的 目的 是 提供 
一 种 普遍 适用 的 模式 ， 只 需要 模型 的 输入 /输出 数据 的 格式 符合 要 求 即 可 使 用 。Tracker 应 用 的 服 
务 端 使 用 了 Nodejs 构 建 的 服务 器 ， 数 据 库 使 用 MongoDB ， 另 外 通过 json-api 模 块 提 供 符合 
JSONAPI 标 准 的 接口 。 

一 个 稳定 的 接口 (很 少 出 现 不 符合 格式 要 求 的 数据 ) 能 为 开发 者 带 来 愉悦 的 开发 体验 。 当 然 
开发 过 程 中 也 需要 考虑 请 求 中 的 额外 数据 , 例如 认证 信息 或 请 求 首 部 等 。 可 以 通过 定制 适配器 来 
处 理 这 些 情形 。 

在 早 些 时 候 ，Ember 内 置 了 处 理 其 他 数据 源 (例如 localStorage、 固 定数 据 等 ) 的 适配器 。 但 
现在 这 些 适配器 不 再 直接 内 置 ， 而 是 以 插件 的 形式 提供 。 如 果 应 用 的 模型 需要 使 用 这 些 数据 源 ， 
可 以 通过 Ember CLI 安 装 对 应 的 插件 。 

在 设计 适配器 时 ,可 以 从 文档 中 获取 有 帮助 的 信息 。 重 点 关注 这 些 方法 或 属性 :ajax0ptions、 
ajaxError、handLeResponse 和 headers。 

现在 的 Tracker 应 用 已 经 能 够 向 服务 器 发 送 查 询 目 击 者 的 请 求 并 接受 返回 的 数据 ,在 继续 学 习 
新 内 容 之 前 ,将 神秘 生物 模型 也 改 为 使 用 this .store.findAl1l 获 取 数 据 。 由 于 目前 还 没有 为 神 
秘 生物 创建 模板 ， 所 以 暂时 需要 通过 Ember Inspector 查 看 数据 。 






























































修改 app/routes/cryptids.js: 


import Ember from 'ember'; 


export default Ember.Route.extend({ 

















model (){ 
return this.store.findAll('cryptid'); 
} 
}); 
现在 应 用 能 够 获取 数据 了 ， 打 开 http://localhost:4200/cryptids ， 在 Ember Inspector 中 查看 返 
的 数据 : a 选择 Ember 标 签 ， 点 击 Data， 接 着 点 击 cryptid(4) 《如 图 22-4 所 为 。 
eoe Developer Tools - http:/localhost:4200/cryptids 
[R | Elements Console Sources Network Timeline Profiles Resources Security Audits Ember A1| : 
http://localhost:4200/cryptiv | Search (©) New Modified Clean 4 
国 view rree MODESTYPES Id Name Cryptid type Profile img 
fs Rones er 7 4 fdf( Aaron Nerd im i 
witness (0) 56al2a74744b5c0300511bb8 Chewie Chupacabra assets/images/cryptids/ 
56al2a96744b5c0300511bb9 Nessie Loch Ness Monster assets/images/cryptids/ 
个 Deprecations 四 56al2ac7744b5c0300511bba Harry Sasquatch assets/images/cryptids/ 
© Info 
ADVANCED 
四 Promises 
国 Container 


(2) Render Performance 





图 22-4 ”神秘 生物 数据 


目前 只 用 到 了 Ember Inspector 查 看 内 存 中 数据 的 功能 ， 其 他 更 多 的 功能 还 有 待 探索 ， 例 如 
Ember 可 以 从 API 请 求 数据 并 存储 到 对 应 的 store 中 。 当 需 要 对 模型 数据 进 行 调试 时 , 跟踪 请 求 路 
径 的 过 程 通常 乏味 而 见长 ， 这 时 应 该 优先 使 用 Ember Inspector。 


22.2 ”内 容 安全 策略 


为 了 能 在 请 求 到 达 服 务 端 之 前 检测 到 跨 站 攻击 ，Ember 在 JavaScript 中 添加 了 一 个 安全 层 , 使 用 
的 工作 标准 是 内 容 安全 策略 ( Content Security Policy )。Ember CLI 内 置 了 contentSecurityPolicy 
对 象 用 于 提供 相应 的 信息 。Ember 默 认 的 安全 策略 非常 严格 ， 这 些 策略 适用 于 向 应 用 域名 之 外 的 
域名 ( 跨 域 ) 发 起 的 请 求 ， 包 括 对 数据 、 脚 本 、 图 片 、 样 式 以 及 其 他 类 型 文件 的 请 求 。 

Ember 提 供 了 一 款 插件 ember-cli-content-security-policy ， 用 于 修改 默认 安全 策略 。 虽 然 在 
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Tracker 中 还 用 不 到 它 ,但 最 好 能 对 它 有 所 了 解 。 使 用 这 个 插件 为 安全 策略 设置 环境 变量 十 分 简单 ， 
它 提供 的 安全 策略 对 象 与 浏览 絮 的 内 容 安全 策略 规范 兼容 ,一 些 较 新 的 浏览 器 会 默认 使 用 内 容 安 
全 策略 ， 以 便 阻 止 由 于 运行 恶意 代码 而 引发 的 跨 站 脚本 攻击 和 代码 注入 攻击 。 

这 儿 有 一 个 contentSecurityPolicy 对 象 的 示例 : 


module.exports = function(environment) { 











// config/environment.js 

ENV.contentSecurityPolicy = { 
'default-src': "" 
'script-src'’: "" 
'font-src': "" 
'connect-src': "" 
'ijmg-src': "" 
'style-src': "", 
'media-src': null 


} 

其 中 的 每 行 代码 都 为 一 种 特定 的 请 求 类 型 定义 了 一 份 白 名 单 , 也 就 是 一 个 包含 多 条 安全 URL 
的 集合 。 其 中 default-src 对 所 有 未 明确 指定 策略 的 请 求生 效 , 它 的 默认 值 为 nutl, 目的 是 强制 
开发 者 指定 白 名 单 。 其 他 的 设置 (例如 script-src 和 connect-src ) 对 向 外 部 域名 ( 例如 
https://bnr-tracker-api.herokuapp.com ) 发 送 的 请 求 有 效 。 

可 以 从 MDN 的 Content Security Policy 页 面 或 者 Ember CLI 插 件 的 GitHub 仓 库 获 取 更 多 信息 。 


22.3 ”序列 化 器 


数据 在 传人 和 传 出 时 , JSON 结 构 会 经 历 序列 化 和 反 序 列 化 。 适 配器 在 数据 流入 或 流出 store 
时 使 用 序列 化 器 来 构建 请 求 数据 或 发 送 响应 数据 。 

创建 序列 化 器 的 命令 是 ember g serialize [应 用 或 模型 名 称 ] ， 执 行 这 个 命令 会 创建 序列 
化 器 文件 。 在 其 中 添加 样 例 代 码 : 


import DS from 'ember-data'; 
























































export default DS.JSONAPISerializer.extend({ 
}); 


序列 化 器 本 身 是 一 个 对 象 ， 会 作为 serializer 属 性 被 添加 到 适配器 对 象 上 。 如 果 在 应 用 中 
没有 定义 序列 化 器 ， 则 Ember 会 使 用 默认 的 适配器 和 序列 化 器 ， 也 就 是 JSONAPIAdapter 和 
JSONAPIS erializer。 

在 应 用 引入 新 的 序列 化 器 时 ， 这 个 序列 化 器 会 被 对 应 的 app/adapters/application.js 文 件 用 作 
defaultSerializer。 以 模型 的 名 字 作 为 参数 执行 命令 ember g serializer 可 以 为 该 模型 定制 数据 
的 序列 化 器 。 

当 使 用 JSONAPIAdapter 时 ， 只 有 在 API 不 符合 JSONAPI 规 范 或 者 应 用 中 包含 边缘 案例 时 , 才 
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需要 修改 默认 配置 。 如 果 需 要 在 项 目 中 修改 请 求 或 响应 的 数据 ， 可 以 查阅 Ember Data 文 档 中 的 这 
些 方法 : keyForAttribute、 keyForRelationship、modelNameFormPayloadKey 和 serialize。 

keyForAttribute 的 功能 是 将 模型 的 属性 名 转化 成 请 求 数据 需要 的 键 名 。 它 需要 3 个 参数 : 
key 、typeCLass 和 method。 对 JSONAPISerializer 使 用 这 个 方法 后 会 返回 中 划 线 分 割 的 键 名 ， 换 
名 话说 ， 这 个 方法 会 将 键 名 里 下 划 线 分 割 的 样式 和 驼峰 样式 都 转化 成 中 划 线 分 制 的 样式 。 例 如 ， 
模型 中 包含 一 个 属性 first_name， 那么 它 在 请 求 对 象 中 会 被 转化 为 first-name。 反 过 来 ， 如 果 
API 要 求 的 格式 是 first_name， 那 么 需要 修改 keyForAttribute 方 法 来 解决 这 个 命名 问题 。 

keyForRelationship 也 是 相似 的 逻辑 ， 只 不 过 它 针对 的 是 描述 关系 的 键 名 。 如 果 使 用 
belongsTo 或 hasMany 定 义 模 型 间 的 关系 ， 并 且 模 型 名 中 包 仿 下划线， 那么 需要 修改 这 个 方法 以 
便于 JSONAPISerializer 使 用 。 有 些 API 要 求 描述 关系 的 字段 以 _id 或 ids 结 尾 ， 也 可 以 通过 这 个 
方法 来 实现 。 

Tracker 使 用 的 接口 bnr-tracker-api 对 键 名 的 要 求 与 SONAPI 一 致 ， 也 就 是 中 划 线 分 制 ， 如 
cryptid-type, 所 以 Tracker 应 用 并 不 需要 使 用 序列 化 器 。 这 里 提供 的 例子 只 是 用 来 展示 序列 化 器 
的 用 法 : 使 用 Ember 提 供 的 工具 方法 Ember.String.underscore 改 变 请 求 和 响应 数据 的 属性 名 。 


import Ember from 'ember'; 
import DS from 'ember-data’'; 
var underscore = Ember.String.underscore; 
export default DS.JSONAPISerializer.extend({ 
keyForAttribute(attr) { 
return underscore(attr); 
}, 
keyForRelationship(rawKey) { 
return underscore(rawKey); 
} 
}); 


Ember 在 Ember.String 对 象 中 提供 了 许多 操作 字符 串 的 方法 。Ember.String.underscore 
的 功能 是 将 使 用 空格 分 割 或 驼峰 形式 的 字符 串 转 换 为 全 部 小 写 且 使 用 下 划 线 分 制 的 形式 。 

序列 化 器 会 在 数据 请 求 的 流程 中 调用 ， 例 如 在 this.store.findALL('witness') 中 。 如 果 
需要 查看 数据 请 求 时 的 回调 流程 , 也 可 以 在 序列 化 器 中 加 入 调试 代码 , 这 样 就 可 以 看 到 流 和 人 和 流 
出 序列 化 器 的 数据 。 

来 看 一 个 示例 : 


import Ember from 'ember'; 
import DS from 'ember-data'; 





























































































































var underscore = Ember.String.underscore; 


export default DS.JSONAPISerializer.extend({ 
keyForAttribute(attr) { 
let returnValue = underscore(rawKey); 
debugger; 
return returnValue; 


return underscore(rawKey); 
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}， 
keyForRelationship(rawKey) { 
return underscore(rawKey ) ; 
} 
}); 
在 应 用 接 入 新 的 API 时 ， 这 种 调试 方案 非常 有 用 。 当 需要 调整 attr 的 参数 以 便 对 键 名 进行 序 
列 化 时 ， 用 这 种 调试 方案 可 以 访问 Ember.String 对 象 。 感 谢 Ember 和 Ember 社 区 为 各 种 API 模 式 
开发 了 适配器 和 序列 化 器 。 


22.4 变换 器 


Ember Data 提 供 了 转化 数据 的 能 力 ， 可 以 将 API 提 供 的 数据 转化 成 应 用 需要 的 格式 。 第 21 章 
曾 使 用 过 Ember 内 置 的 变换 器 DSs.attr('string')、DS.attr('booLean')、DS.attr ('number') 
和 DS.attr('data')。 
也 可 以 为 应 用 添加 自 定义 的 变换 器 ， 添 加 之 后 通过 DS .attr 使 用 新 定义 的 属性 类 型 。 变 化 器 
接受 一 个 值 并 将 它 转化 成 指定 的 类 型 后 返回 ， 有 些 类 似 于 JavaScript 中 的 类 型 强制 转化 。 
这 有 一 个 使 用 DS.attr('object' ) 变 换 器 的 例子 : 
export default DS.Transform.extend({ 
deserialize(value) { 
if (!Ember.$.isPplainObject(value)) { 
return {}; 
} else { 
return value; 


} 























}, 
serialize(value) { 
if (!Ember.$.isPlainObject(value)) { 
return {}; 
} else { 
return value; 
} 
} 
}); 


需要 为 变换 器 定义 两 个 方法 : deserialize 和 serialize。deserialize 的 功能 是 判断 传人 
应 用 的 数据 是 否 是 对 象 类 型 ， 如 果 是 对 象 则 直接 返回 , 反之 返回 空 对 象 。serialize 的 功能 是 判 
断 从 应 用 传 出 的 数据 是 否 是 对 象 类 型 ,如果 是 对 象 则 直接 返回 , 反之 返回 空 对 象 。 使 用 变换 表 的 
目的 是 保证 发 送 至 API 的 数据 和 从 API 返 回 的 数据 都 与 在 模型 中 定义 的 数据 类 型 相符 。 


22.5 延展 阅读 : Ember CLI Mirage 

API 不 可 用 是 前 端 工程 师 在 开发 过 程 中 经 常 遇 到 的 问题 , 如 API 还 未 开发 、API 在 开发 中 、API 
在 开发 环境 无 法 访问 等 。 

对 于 API 不 可 用 的 情况 有 一 种 相对 简单 的 解决 方案 ， 即 使 用 静态 的 文字 或 者 固定 的 数据 替代 
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请 求 。 但 这 种 方案 也 有 它 的 弊端 , 首先 是 需要 修改 程序 逻辑 来 适应 这 些 无 法 访问 的 数据 ， 其 次 需 
要 在 this.store 中 修改 请 求 ， 有 时 还 需要 修改 适配器 或 序列 化 器 。 

Ember CLI 提 供 了 一 个 插件 Mirage, 它 可 以 将 请 求 代理 到 特定 的 API 路 由 上 。 可 以 通过 创建 模 
型 来 建立 关联 关系 ， 创 建 工厂 来 生成 数据 ， 为 指定 的 响应 定义 固定 数据 ， 也 可 通过 定义 CRUD 路 
由 拦截 发 给 API 的 特定 请 求 。 当 配置 工作 完成 后 ， 这 些 API 便 可 以 模拟 出 正常 工作 时 的 效果 。 

当 Mirage 开 启 时 ， 所 有 的 请 求 会 根据 Mirage 的 配置 转发 到 本 地 。 

在 本 书 出 版 时 ，ember-cli-mirage 的 最 新 版 本 是 0.2.0-beta.8， 短 时 间 内 使 用 Mirage 还 只 能 作为 
一 种 探索 和 尝试 。 可 以 访问 www.ember-cli-mirage.com 查 看 更 多 信息 。 

下 一 章 中 将 汇总 前 面 3 章 介绍 过 的 内 容 ， 完 成 一 款 能 够 接受 路 由 请 求 并 展示 数据 的 应 用 。 
第 24 章 将 会 对 数据 进行 增加 、 编 辑 和 删除 。 接 下 来 就 能 看 到 Ember Data 、 适 配器 和 序列 化 器 的 
威力 : 你 可 以 在 模型 上 调用 save 和 destroyRecord， 并 且 整 个 将 数据 发 送 到 API 的 过 程 都 无 须 
你 过 多 费心 。 


22.6 ”中 级 挑战 ， 内 容 安 全 


在 任何 时 候 都 应 该 为 应 用 添加 一 个 安全 层 。 前面 提 到 过 , 浏览 器 为 内 容 安全 策略 提供 了 新 的 
API， 并 且 Ember 也 提供 了 一 个 环境 对 象 用 于 配置 安全 策略 的 白 名 单 。 请 安装 这 个 插件 ， 并 根据 
控制 台 的 错误 提示 ， 将 应 用 中 用 到 的 所 有 外 部 请 求 都 加 入 白 名 单 。 













































































22.7 ”高 级 挑战 : Mirage 


Ember CLI Mirage 对 开发 者 来 说 是 一 件 称 手 的 兵器 。 有 了 它 ， 在 开发 应 用 与 API 的 交互 时 就 
不 用 受 后 端 团 队 API 开 发 进度 的 限制 。 
在 终端 中 安装 ember-cli-mirage 





ember install ember-cli-mirage 


接 下 来 ， 在 config/environment.js 中 添加 一 个 环境 变量 以 控制 Mirage 的 开关 状态 : 


if (environment === 'development') { 
// ENV.APP.LOG RESOLVER = true; 
// ENV.APP.LOG ACTIVE GENERATION = true; 
// ENV.APP.LOG TRANSITIONS = true; 
// ENV.APP.LOG TRANSITIONS INTERNAL = true; 
// ENV.APP.LOG VIEW LOOKUPS = true; 
ENV['ember-cLi-mirage'] = { 
enabled: true 
} 
} 


最 后 ， 以 工厂 的 形式 为 目击 者 和 神秘 生物 接口 创建 假 数据 。 
可 以 从 例子 资源 Tracker/Data_ Chapter/mirage-example 项 目的 app/mirage 目 录 中 查看 配置 示 
例 ， 并 将 其 运用 到 Tracker 应 用 中 。 我 们 会 经 常 更 新 这 个 示例 ， 确 保 它 能 与 最 新 版 本 的 插件 兼容 。 

















视图 与 模板 











MVC 中 的 V 代 表 的 是 视图 ( view )。 对 Tracker 应 用 来 说 ， 视 图 指 的 是 模板 。 通 过 JavaScript 的 
处 理 , 模板 可 以 转化 成 HTML 元 素 。 而 通过 使 用 模板 ， 可 以 在 不 依赖 网 络 请 求 的 情况 下 改变 页 面 
的 DOM 结 构 。 

在 这 一 章 中 ,我们 会 创建 一 些 模板 文件 并 在 路 由 的 model 方 法 中 加 入 数据 检索 的 逻辑 。 Ember 
提供 了 内 置 的 模板 语言 和 许多 辅助 函数 ， 这 使 得 使 用 模板 开发 页 面 的 工作 量 远 远 小 于 使 用 常规 
HTML 语 法 进行 开发 的 工作 量 。 

到 本 章 结束 时 ，Tracker 的 目击 记录 列表 将 如 图 23-1 所 示 。 


























目 目 日 rcker 





¢ C localhost:4200/sightings 六 | 时 三 
Tracker = [3 口 Elements Console Sources Network Timeline Profiles Resources » x 
© 可 top Y 国 Preservelog 
Filter DD Regex [ Hide network messages 
Sightings 团 Errors Warnings Info Logs Debug Handled 
DEBUG; ------------------------------- ember. debug. js:6395 
DEBUG: Ember : 2.4.4 ember. debug. is:6395 
Atlanta DEBUG: Ember Data : 2.4.3 ember. debug. is:6395 
2 months ago DEBUG: jQuery : 2.2.3 ember. debug, js:6395 
DEBUG: —————————-—-——-—------------ -—— ember, debug, is:6395 
Ember Inspector Active YM7822:86 
> 
Calloway 
a month ago 
Bogus Sighting 








图 23-1 目击 记录 列表 
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23.1 Handlebars 


Handlebars 是 一 种 强大 的 语言 ， 可 用 于 创建 动态 模板 ， 有 些 类 似 于 PHP 、JSP、ASP 和 ERB 等 
服务 器 端 使 用 的 模板 语言 。 模 板 中 会 包含 HTML 标 签 和 处 理 数 据 对 象 所 使 用 的 分 隔 符 。 

Handlebars 选 用 的 分 隔 符 是 双 大 括号 {{}}+。 可 以 将 数据 对 象 或 表达 式 置 于 大 括号 中 进而 将 它 
们 泻 染 成 字符 串 ， 也 可 以 借助 辅助 方法 执行 简单 的 逻辑 。 我 们 曾 见 过 {{outlet}} 和 {{#each}} 
这 两 个 辅助 方法 。 

Ember 最 近 更 新 了 Handlebars 的 解释 器 , 取 名 为 HTMLBars。 本章 的 部 分 内 容 基 于 HTMLBars ， 
但 同样 适用 于 旧版 本 的 Ember ( 最 低 版 本 为 1.13.x )。 


23.2 ”模型 


在 Ember 中 ， 模 板 是 由 模型 数据 支撑 的 。 换 句 话 说， 数据 对 象 (或 对 象 数组 ) 会 作为 参数 传 
递 给 模板 ， 接 着 模板 被 泻 染 成 HTML 字 符 串 并 插入 到 DOM 中 。 

每 个 模型 对 象 可 以 包含 多 种 类 型 的 属性 ， 如 字符 串 、 数 组 或 其 他 对 象 。 在 模板 里 可 以 通过 双 
大 括号 来 访问 模型 对 象 及 其 属性 。 

如 果 需 要 在 模板 中 显示 一 个 模型 属性 ， 例 如 name， 那 么 可 以 使 用 {{model .name}}。 这 种 语 
法 看 起 来 可 能 很 眼熟 ， 但 千 万 不 要 被 它 的 外 表 所 迷惑 而 试图 直接 在 大 括号 中 执行 JavaScript 语 句 。 


23.3 ”辅助 方法 


Handlebars 模 板 本 质 上 只 是 一 个 大 字符 串 ， 模板 引 苟 通过 JavaScript 函 数 对 它 进行 解析 和 替换 
等 操作 。 当 解析 器 遇 到 大 括号 时 会 解析 大 括号 中 的 内 容 , 根据 其 内 容 返回 相应 的 对 象 属 性 或 运行 
函数 并 返回 运行 结果 。 这 里 的 函数 就 是 辅助 方法 。Handlebars 内 置 了 一 些 辅助 方法 ，Ember 又 根 
据 框 架 的 需要 补充 了 一 些 。 
辅助 方法 有 两 种 写法 。 一 种 是 行 级 写法 ,形式 是 {{[helper name] [arguments]}}。 这 里 
的 参数 (arguments ) 可 以 包含 多 个 键 值 对 ， 例 如 : 

{{input type="text" value=firstName disabled=entryNotAllowed size="50"}} 

另 一 种 是 复杂 一 些 的 块 级 写法 : 


{{#[helper name] [arguments]}} 
[block content] 
{{/[helper name]}} 


例如 ， 在 模板 中 添加 一 个 登录 链接 并 且 只 向 未 登录 用 户 展示 : 


{{#if notSignedIn}} 
<a href="/">Sign In</a> 


{{/if}} 
可 以 在 块 级 辅助 方法 的 标签 之 间 传 和 内容, 这 些 内 容 会 被 辅助 方法 动态 演 染 出 来 。 这 就 需要 
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使 用 下 一 节 所 讲 的 Handlebars 内 置 的 条 件 语句 ， 它 也 是 一 个 块 级 辅助 方法 。 
后 面 在 泻 染 目击 者 、 神 秘 生 物 和 导航 条 (NavBar ) 等 模板 时 都 会 用 到 辅助 方法 。 


23.3.1 条 件 语句 
条 件 语句 使 Handlebars 模 板 有 了 简单 的 流程 控制 能 力 ， 它 们 的 语法 如 下 : 


{{#if argument}} 
[render block content] 


{{else}} 


[render other content] 


{{/if}} 
也 可 以 使 用 : 


{{#unless argument}} 
[render block content] 
{{/unless}} 


条 件 语句 需要 一 个 参数 ， 这 个 参数 会 被 转化 成 true 或 者 false。( false、0、""、null、 
undefined 和 NaN 会 被 转化 为 false， 其 他 值 被 转化 为 true。 ) 

现在 回 到 项 目 代 码 中 。 打 开 app/templates/sightings/index.hbs 文 件 , 在 其 中 添加 一 条 条 件 语句 : 
当 目 击 记录 中 存在 地 点 数据 时 显示 该 地 点 ， 否 则 显示 一 条 提示 信息 。 









































<div class="row"> 
{{#each model as |sighting|}} 
<div class="col-xs-12 col-sm-3 text-center"> 
<div class="media well"> 
<div class="caption"> 
{{#if sighting.Tlocation}} 
<h3>{{sighting.location}} - {{sighting.sightedAt}}</h3> 
{{else}} 
<h3 class="text-danger">Bogus Sighting</h3> 
{{/if}} 
</div> 
</div> 
</div> 
{{/each}} 


</div> 


在 修改 目击 记录 模板 的 DOM 结 构 的 同时 ， 你 还 引入 了 Bootstrap 提 供 的 样式 ， 以 便 能 够 以 更 
友好 的 样式 输出 信息 。 通过 {{# 失 ff}} 和 {{else}}, 实现 根据 目击 记录 中 是 否 存 在 地 点 信息 , 从 而 
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演 染 出 不 同 的 HTML。 
现在 尝试 修改 数据 ， 以 便 测试 条 件 语句 的 效果 。 打 开 目 击 记 录 的 路 由 模型 app/routes/ 
sightings.js， 任 选 一 条 记录 并 将 其 地 点 信息 修改 为 空 值 。 





~ model (){ 


Let record3 = this.store.createRecord('sighting', { 
location: 'Asilemar', 
sightedAt: new Date('2016-03-21') 

}); 


return [recordl, record2, record3]; 
} 
}); 


启动 服务 器 ， 访 问 http://localhost:4200/sightings 查 看 修改 后 的 列表 ( 如 图 23-2 扬 s* )。 


©00 Orcer 
所 人 localhost:4200/sightings 





a 一 民 是 ， Elements Console Sources Network Timeline Profiles Resources » 
Q@ 了 top v 占 Preservelog 
日 Regex © Hide network messages 
Sightings 0 Erors Warings Info Logs Debug Handled 

DEBUYG: —————— ember. debug, is:6395 
DEBUG: Ember 1 2,4.4 ember. debug. is:6395 
Atlanta - Mon Feb 08 2016 19:00:00 GMT-0500 DEBUG: Ember Data ; 2.4.3 ber, debug, is:6395 
(EST) DEBUG: jQuery : 2.2.3 ember, debug, is:6395 
DEBUG: 一 一 -一 -一 -一 -一 一 一 ember. debug, is:6395 


Ember Inspector Active YM7967: 


Calloway - Sun Mar 13 2016 20:00:00 GMT-0400 
(EDT) 


Bogus Sighting 











图 23-2 ”伪造 的 记录 
最 后 一 条 目击 记录 的 地 点 信息 值 是 空 字 符 串 ， 所 以 条 件 语句 将 它 转化 为 faLtse， 继 而 泻 染 出 


一 条 警告 口 信息 Co 








23.3.2 ”{{#each}} 循 环 


首页 的 模板 中 使 用 了 {{#each}} 辅 助 方 法 , 它 的 功能 是 遍历 数组 , 在 每 次 循环 时 从 数组 中 取 
一 个 对 象 实例 供 循 环 体 使 用 。{{#each}} 参 数 的 格式 是 array as |instance|， 其 中 array 是 
一 个 对 象 数 组 ,而 instance 是 在 循环 体 中 访问 数组 元 素 时 的 实例 名 。{{#each}} 只 有 在 array 数 
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组 至 少 包含 一 个 元 素 时 才 会 对 循环 体 进行 演 染 。 
与 {{#if}} 类 似 ,也 可 以 在 {{#each}} 后 使 用 {{else}}, 当 array 数 组 为 空 时 会 泻 染 {{else}} 
后 的 内 容 。 


修改 app/templates/cryptids.hbs 模 板 ， 使 用 {{#each}} {{else}} {{/each}} 演 染 神 秘 生物 列 
表 ， 当 列表 为 空 时 显示 提示 信息 “No Creatures”。 


{{outlet}} 
<div class="row"> 
{{#each model as |cryptid|}} 
<div class="col-xs-12 col-sm-3 text-center"> 
<div class="media well"> 
<div class="caption"> 
<h3>{{cryptid.name}}</h3> 
</div> 
</div> 
</div> 
{{else}} 
<div class="jumbotron"> 
<hl>No Creatures</h1> 
</div> 
{{/each}} 


</div> 
和 目击 记录 页 面 一 样 ， 这 里 也 为 神秘 生物 页 面 加 入 更 友好 的 样式 。 通 过 使 用 {{else}} 标 签 
对 数组 为 空 的 情况 进行 处 理 : 当 神 秘 生物 列表 为 空 时 ， 在 页 面 中 泻 染 一 个 提示 信息 。 


访问 http:/localhost:4200/cryptids 查 看 刚 创建 的 神秘 生物 列表 ( 如 图 23-3 所 : )。 


0@ /Oracker 












































所 人 localhost:4200/cryptids 于 三 
Ek il Network Timeline » : 
es 民 是 lements Console Sources Networ imeline 2 
Q@ top v Preserve log 
Regex © Hide network messages 
1 ; 加 Emors Warnings Info Logs Debug Handled 
Aaron Chewie Nessie Harry ~ ob 
DEBUYG: -一 一 一 一 -一 -一 -一 -一 -一 一 -一 ember, debug, is:6395 
DEBUG: Ember :2.4.4 ember. debug, js:6395 
DEBUG: Ember Data : 2.4.3 ember. debug. is:6395 
DEBUG: jQuery : 2.2.3 ember. debug. js:6395 
DEBYG: -一 一 一 一 -一 -一 一 一 一 一 一- 一 ember. debug, is:6395 
>1 
;Console Animations x 





图 23-3 ”神秘 生物 列表 





23.3 ”辅助 方法 ”375 





现在 打开 appmoutes/cryptidsjs， 把 其 中 返回 数据 的 那 一 行 代码 注释 掉 ， 模 拟 一 个 数据 为 空 的 
场景 o 


model(){ 
// return this.store.findAll('cryptid'); 
} 
}); 





刷新 http:/localhost:4200/eryptids ， 再 次 查看 神秘 生物 列表 ( 如 图 23-4 所 示 )。 


©0908 /DTacro 


所 © localhost:4200/cryptids 


£3 
X | le 


Tracker TestLink TestLink 民 帅 | Elements Console Sources Network Timeline » 
i i 





@ top v Preserve log 


ter 日 Regex © Hide network messages 
@ Erors wamings Info Logs Debug Handled 
DEBUG: 一 -一 -- 一 -一 一 -一 -一 -一 - ember,debug,js;6395 
No ( reatu res DEBUG: Ember : 2.4.4 ember. debug. js:6395 
DEBUG: Ember Data ; 2.4.3 
DEBUG: jQuery :2.2.3 
DEBUG: 一 一 一 一 一 一- 一 
>1| 


i Console Animations x 


图 23-4 ”神秘 生物 列表 为 空 








借助 {{each}} {{else}} {{/each}}， 无 须 使 用 复杂 的 逻辑 就 可 以 根据 数据 状态 控制 页 面 
内 容 的 展示 。 现 在 已 经 验证 了 条 件 遍 历 语句 的 效果 ， 还 原 app/routes/cryptids.js 文 件 。 


model (){ 


A return this.store.findAll('cryptid'); 
} 
}); 


23.3.3 元素 属性 赋值 


使 用 模板 不 仅 可 以 在 标签 之 间 浑 染 内 容 ， 也 同样 可 以 为 标签 的 属性 赋值 。 对 于 早 前 版 本 的 
Ember， 需 要 使 用 {{bind-attr}} 辅 助 方法 才能 为 属性 赋值 。 不 过 新 版 本 中 引入 了 HTMLBars， 
它 支 持 直接 使 用 {{}} 为 元 素 的 属性 赋值 。 


属性 赋值 常用 于 元 素 属性 ， 比 如 class 和 src。 神 秘 生物 记录 中 包含 图 片 路 径 ， 所 以 可 以 动 
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态 地 将 模型 的 属性 赋值 给 图 片 元 素 的 src 属 性 。 
修改 app/templates/cryptids.hbs， 为 列表 中 的 神秘 生物 记录 添加 一 张 图 片 : 


<div class="row"> 
{{#each model as |cryptid|}} 
<div class="col-xs-12 col-sm-3 text-center"> 
<div class="media well"> 
<img class="media-object thumbnail" src="{{cryptid.profileImg}}" 
alt="{{cryptid.name}}" width="100%" height="100%"> 
<div class="caption"> 
<h3>{{cryptid.name}}</h3> 
</div> 
</div> 
</div> 
{{else}} 
<div class="jumbotron"> 
<hl>No Creatures</h1> 
</div> 
{{/each}} 
</div> 


这 里 需要 把 神秘 生物 的 图 片 素材 复制 到 tracker/public/assets/image/cryptids 目 录 中 。Ember 服 务 
器 在 运行 时 以 public 目 录 作 为 资源 的 根 目录 。 假 如 应 用 需要 在 生产 环境 工作 ， 则 还 需要 对 资源 路 








制 到 dist 目 录 下 。 

















径 进行 进一步 配置 。 但 对 开发 过 程 来 说 , 可 以 简单 地 使 用 publicassets 目 录 。 这 些 文件 会 在 编译 时 
复 


在 把 应 用 部 署 到 生产 环境 时 ， 需 要 对 引用 图 片 的 路 径 进 行 处 理 ， 使 用 图 片 的 真实 路 径 。 在 
这 个 DEMO 项 目 中 ,我 们 只 是 简单 地 把 图 片 保 存 到 同一 目录 下 ， 并 把 图 片 的 相对 路 径 记录 到 数 


























据 库 中 。 
在 引入 HTMLBars 之 前 ， 如 果 需 要 根据 一 个 布尔 值 决 定 是 否 泻 染 变量 ， 





{{bind-attr}} 里 使 用 三 元 操作 符 。 但 是 现在 可 以 直接 使 用 {{if}}。 在 某 些 场景 中 ， 





量 的 值 泻 染 页 面 样式 时 ， 这 种 用 法 会 非常 常见 。 
修改 app/templates/cryptids.hbs， 使 用 三 元 操作 处 理 图 片 不 存在 的 情况 。 


<div class="row"> 
{{#each model as |cryptid|}} 
<div class="col-xs-12 col-sm-3 text-center"> 
<div class="media well"> 
<img class="media-object thumbnail" = a! 
src="{{if cryptid.profiLeImg cryptid.profileImg 
'assets/images/cryptids/blank_th.png'}}" 
alt="{{cryptid.name}}" width="100%" height="100%"> 
<div class="caption"> 








通常 会 在 


如 根据 变 


与 块 级 的 {{#if}} 不 同 , 行 级 的 {{if}} 不 会 输出 内 容 块 。 它 会 根据 第 一 个 参数 的 真 假 选择 输 


出 第 二 个 或 者 第 三 个 参数 。 





对 这 上段 代码 来 说 ,首先 要 计算 第 一 个 参数 {{cryptid.profileImg}} 的 真 假 。 如 果 为 真 ， 输 
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出 神秘 生物 的 图 片 路 径 ， 反 之 则 输出 一 个 占 位 图 。 

行内 的 辅助 方法 支持 使 用 任意 变量 作为 参数 ， 甚 至 也 支持 JavaScript 的 基本 类 型 ， 如 字符 串 、 
数组 、 布 尔 值 等 。 

在 查看 页 面 效果 之 前 ， 首 先 对 app/routes/cryptids.js 做 一 些 修改 ， 在 beforeModel 钧 子 中 添加 
一 条 不 包含 图 片 的 神秘 生物 记录 。 


import Ember from 'ember'; 








export default Ember.Route.extend({ 
beforeModel (){ 
this.store.createRecord('cryptid', { 
"name": "Charlie", 
"cryptidType": "unicorn" 
}); 
}, 
model (){ 
return this.store.findAll('cryptid'); 
} 
}); 


现在 刷新 http://localhost:4200/cryptids 页 面 ， 看 看 添加 图 片 之 后 的 列表 ( 如 图 23-5 所 示 )。 


生生 四 /cker 











和 C [localhost:4200/cryptids 于 三 
Te | Elements Console Sources Network Timeline » Fo 
@ 可 top Preserve log 
Fite Regex © Hide network messages 
Us DD Erors Warnings Info Logs Debug Handled 
机 g UE re ember. debug, is:6395 
YY DEBUG: Ember : 2.4.4 ember. debug. is:6395 
pw PV 2 DEBUG: Ember Data ; 2.4.3 ember, debug, is:6395 
DEBUG: jQuery 3 2.2.3 ember,. debug, js:6395 
Charlie Aaron Chewie Nessie DEBYG: 一 一 一 -一 一 一 一 一 一 一 ember,debug js:6395 
>1| 
:Console Animations X 








图 23-5” 带 有 图 片 的 神秘 生物 列表 








23.3.4 ”链接 


在 第 20 章 就 讨论 过 , 对 于 一 款 基 于 浏览 咒 的 应 用 , 路 由 是 其 独特 的 标志 。 对 具体 的 应 用 来 说 ， 
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Ember 通 过 监听 事件 钩子 对 路 由 进行 管理 。 因 此 , 需要 使 用 {{#Link-to}} 来 创建 链接 , 它 的 参数 
































Home{{/Link-to}} 会 创建 一 个 到 主页 的 链接 。 
尝试 使 用 {{#1link-to}} 替 换 掉 导 航 中 的 链接 。 








是 目的 路 由 的 名 称 ， 调 用 的 结果 是 生成 一 个 <a> 元 素 。 例 如 调用 {{#link-to 'index'}} 








打开 app/templates/application.hbs 文 件 , 将 其 中 的 假 链接 替换 成 指向 目击 记录 、 神 秘 生 物 和 目 





击 者 的 链接 : 











<div class="collapse navbar-collapse" id="top-navbar-collapse"> 


<ul class=" nav navbar-nav"> 


<a href="#">Test Link</a> 





<a href="#">Test Link</a> 





{{#Link-to 'sightings'}}Sightings{{/Link-to}} 
</Li> 
<Li> 
{{t#Link-to 'cryptids'}}Cryptids{{/Llink-to}} 
</Li> 
<Li> 
{{#link-to 'witnesses'}}Witnesses{f{/Link-to}+} 
</Li> 
</ul> 
</div><!-- /.navbar-collapse --> 


现在 这 些 导 航 已 经 可 以 链接 到 各 个 页 面 了 。 点 点 链接 , 再 点 点 返 





真 棒 ! 





回 键 。 应 用 可 以 正常 工作 了 ， 


接 下 来 为 神秘 生物 列表 中 的 照片 也 加 上 链接 ， 链 接 指向 神秘 生物 的 详情 页 。 在 这 个 例子 中 ， 








{{#1ink-to}} 接 受 多 个 参数 ， 通 过 这 些 参 数 对 链接 进行 定制 。 打 开 app/templates/cryptids.hbs 文 
件 在 <img> 标 签 外 包 庄 上 指向 神秘 生物 详情 页 的 链接 , 并 且 传 人 cryptid.id 作 为 链接 的 第 二 个 








参数 。 


<div class="media well"> 
{{t#Link-to “cryptid' cryptid.id}} 
<img class="media-object thumbnail" 
src="{{if cryptid.profiLeImg cryptid.profiLeImg 
'assets/images/cryptids/blank th.png'}}" 
alt="{{cryptid.name}}" width="100%" height="100%"> 
{{/Link-to}} 
<div class="caption"> 
<h3>{{cryptid.name}}</h3> 
</div> 
</div> 
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添加 的 这 些 链 接 格式 是 cryptids/[cryptid_id] ,指向 神秘 生物 详情 页 现在 需要 对 routerjs 
进行 修改 ， 使 神秘 生物 详情 页 路 由 (CryptidRoute ) 能 接受 并 处 理 动态 参数 。 



































Router,map(function() { 

this.route('sightings', function() { 
this.routel('new'); 

}); 

this.route('sighting', function() { 
this.route('edit'); 

}); 

this.route('cryptids'); 

this.route('cryptid', {path: 'cryptids/:cryptid id'}); 

this.route('witnesses'); 

this.route('witness'); 


}); 





尝试 点 一 下 神秘 生物 列表 中 的 图 片 , 如 果 能 看 到 一 个 空白 页 面 , 就 说 明 刚 添加 的 路 由 已 经 能 
够 正常 工作 了 。 这 个 链接 会 跳 转 到 神秘 生物 页 面 ， 这 个 页 面 使 用 的 是 app/templates/cryptid.hbs 模 
板 。 由 于 这 个 模板 目前 还 是 空 的 ， 所 以 页 面 也 是 一 片 空白 。 

但 如 果 点 击 的 是 Charlie (一 头 独 角 兽 ) 的 图 片 ， 应 该 会 看 到 一 条 错误 提示 。 回 想 一 下 ， 这 条 
记录 是 在 beforeModel 钓 子 中 添加 的 ， 记 录 中 没有 id 属 性 ， 也 就 意味 着 传人 {{#Link-to}} 的 值 
为 null。 

现在 将 beforeModetL 钩 子 移 除 , 因为 正常 情况 下 所 有 的 神秘 生物 都 应 该 通过 添加 神秘 生物 的 
表单 页 面 (会 在 下 一 章 中 创建 这 个 页 面 ) 进行 添加 。 

打开 app/routes/cryptids.js， 删 掉 beforeModel: 


























model(){ 
return this.store.findAll('cryptid'); 


J} 





接 下 来 修改 app/routes/cryptid.js， 在 其 中 添加 对 服务 端的 数据 请 求 : 


import Ember from 'ember'; 


export default Ember.Route.extend({ 
model (params){ 
return this.store.findRecord('cryptid', params.cryptid id); 
} 
}); 
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路 由 接受 cryptid_id 参 数 后 又 把 它 传 给 模型 ， 作 为 findRecord 的 参数 发 起 查询 请 求 。 
打开 app/templates/cryptid.hbs ， 这 个 模板 用 来 泻 染 神秘 生物 的 详情 页 ， 其 中 展示 了 神秘 生物 


的 图 片 和 名 称 。 
{foutlet} 了 


<div class="container text-center"> 
<img class="img-rounded" src="{{model.profileImg}}" alt="{{model.type}}"> 


<h3>{{model .name}}</h3> 
</div> 
数组 ， 而 是 一 个 对 象 。 它 是 一 个 神秘 生物 的 实例 , 通过 调用 


这 一 次 传递 给 模板 的 参数 不 再 是 


this.store.findRecord 方 法 返回 。 在 模板 中 使 用 model 访 问 这 个 对 象 ， 


{{model. [property-name]}} 可 以 获取 对 象 的 属性 。 
打开 浏览 器 , 通过 顶部 导航 打开 神秘 生物 页 面 , 在 列表 中 点 击 任意 一 个 神秘 生物 的 图 片 查看 


详情 页 ( 如 图 23-6 所 示 )。 


























生意 四 DTacker 
所 名 localhost:4200/cryptids/56a11378a81a4803001fdf00 
[中 | Elements Console Sources Network Timeline 
Preserve log 


» 


Tracker Sightings Cryptids Witnesses 
QQ 可 top 
Regex 目 Hide network messages 


gs Debug Handled 





ember. debug. js:6395 


ember, debug. js:6395 





i Console Animations 





图 23-6 ”神秘 生物 详情 页 





点 ， 辅 助 方 法 是 在 模板 演 染 时 


AN 

















在 后 面 的 章节 中 ， 我 们 还 会 继续 学 习 {{#Link-to}}。 记 住 
运行 的 函数 。Ember 提 供 了 一 些 辅助 方法 ,但 不 代表 只 能 使 用 这 些 辅助 方法 。 


23.4 ” 自 定义 辅助 方法 
在 目击 记录 列表 中 ，sightedAt 字 段 以 原始 的 日 期 字符 串 的 形式 展示 ,非常 难看 。 为 了 让 日 
期 更 加 美观 ， 再 次 使 用 在 Chattrbox 中 用 过 的 moment 库 对 日 期 进行 格式 化 。 
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从 终端 中 安装 moment: 


bower install moment --save 


修改 ember-cli-build.js 文 件 ， 使 用 app. import 添 加 对 moment 库 的 引用 : 








// 使 用 import 引 入 资源 文件 
app.import(bootstrapPath + 'javascripts/bootstrap.js'); 
app.import('bower_components/moment/moment.js'); 


return app.toTree(); 

}; 

由 于 修改 了 配置 文件 ， 所 以 需要 重启 服务 器 才能 生效 。 在 终端 里 使 用 Control + C 快 捷 键 停止 
服务 器 ， 然 后 执行 ember server 重 新 启动 它 。 

还 需要 生成 一 个 辅助 方法 模块 : 

ember g helper moment-from 

接 下 来 的 任务 是 创建 一 个 函数 ， 它 接受 日 期 作为 参数 ， 通 过 momentjs 库 对 日 期 进行 处 理 ， 
最 后 返回 一 段 HTML 代 码 。 另 外 ， 为 返回 的 日 期 包 庄 上 <span> 标 签 ， 并 在 标签 上 加 入 Bootstrap 
提供 的 文本 样式 类 。 

打开 刚刚 生成 的 app/helpers/moment-from.js， 添 加 这 个 新 函数 : 


import Ember from 'ember'; 
























































export function momentFrom(params/*, hash*/) { 
return paramss; 
了 
export function momentFrom(params) { 
var time = window.moment(...params); 
var formatted = time.fromNow(); 
return new Ember.Handlebars.SafeString( 
'<span class="text-primary">" 
+ formatted + '</span>' 
); 
} 


export default Ember.Helper.helper(momentFrom); 


现在 已 经 定义 好 了 辅助 方法 ， 接 下 来 在 app/templates/sightings/index.hbs 模 板 中 使 用 它 : 


{{#if sighting.location}} 


<h3>{{sighting.location}} -~ {{sighting.sightedAt}}</h3> 
<p>{{moment-from sighting.sightedAt}}</p> 
{{else}} 


辅助 方法 moment-from 接 受 一 个 日 期 对 象 作 为 参数 ,返回 日 期 格式 化 后 的 HTML 字 符 串 。 在 
自 定义 辅助 方法 时 ， 可 以 使 用 Ember 提 供 的 Ember.Handlebars.SafeString 方 法 对 字符 串 进 行 
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看 一 下 对 日 期 进行 格式 化 之 后 的 效果 ( 如 图 23-7 所 示 )。 





ee Orc 





€ C localhost:4200/sightings 对 三 
ale 二 [RElements Console Sources Network Timeline Profiles » x 
Q@ itop v Preserve log 
Regex Hide network messages 
Sightings 名 Errors Warnings Info Logs Debug Handled 
DDUBS. ese ember. debug, js:6395 
DEBUG: Ember 1 2.4.4 ember. debug. js:6395 
Atlanta DEBUG: Ember Data : 2,4,3 ember. debug, is:6395 
2 months ago DEBUG: jQuery : 2.2.3 ember. debug. js:6395 
DEBUG: -一 一 一 一 一 一 ember,. debug, is:6395 
> | 
Calloway 
a month ago 
Bogus Sightings 
i Console Animations x 














图 23-7 使 用 moment.js 格 式 化 日 期 


moment.js 把 日 期 对 象 格式 化 成 了 “2 months ago” 的 样式 ， 看 起 来 是 不 是 比 “Tue Feb 9 2016 
19:00:00 GMT-0500(EST)”* 好 多 了 ? ( moment.js 提 供 了 许多 针对 格式 化 的 参数 ， 通 过 它 的 官网 
momentjs.com 可 以 查看 具体 信息 。) 

通过 定义 辅助 方法 , 可 以 将 一 些 逻 辑 从 模板 中 删除 。 定制 辅助 函数 的 好 处 是 可 以 减少 重复 的 
代码 ， 也 可 以 对 UI 格式 进行 统一 处 理 。 这 些 抽 象 工 作 是 创建 ember 组 件 ( Ember Component ) 的 
第 一 步 ， 剩 下 的 将 会 在 第 25 章 介绍 。 

在 这 一 章 中 , 你 学 会 了 如 何在 模板 中 输出 模型 的 属性 ,以 及 如 何 通过 条 件 语句 和 循环 语句 定 
制 模板 。 另 外 ， 你 还 知道 了 如 何 对 模板 中 HTML 元 素 的 属性 赋值 ， 以 及 如 何 创建 包含 动态 参数 的 
路 由 继而 获取 不 同 的 数据 并 泻 染 到 模板 中 。 最 后 ,你 使 用 辅助 方法 创建 了 到 路 由 的 链接 ， 此 外 还 
定制 了 格式 化 日 期 的 辅助 方法 。 

下 一 章 会 介绍 应 用 生命 周期 中 的 最 后 一 环 
索 数 据 和 创建 装饰 器 。 


23.5 初级 挑战 : 为 链接 添加 鼠标 悬浮 的 内 容 


在 鼠标 移入 时 给 链接 展示 一 些 额 外 的 提示 信息 ， 可 以 通过 为 {{ 刀 ink-to}y} 添 加 tittLe 属 性 
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通过 控制 器 创建 和 修改 数据 一 一 以 及 动作 、 检 
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来 实现 ，title 的 值 是 神秘 生物 的 名 字 。 


23.6 ”中 级 挑战 : 修改 日 期 格式 

{f{moment-from}} 使 日 期 不 再 宛 长 ， 但 是 却 过 于 精简 ， 缺 失 了 太 多 信息 。 请 查阅 moment 的 
文档 ， 尝 试 将 输出 样式 改 为 “Sunday May 31, 2016”。 
23.7 ”高 级 挑战 : 创建 一 个 自 定义 缩 略图 辅助 方法 


在 展示 神秘 生物 的 缩 略 图 时 使 用 了 过 多 的 代码 。 请 创建 一 个 用 于 展示 缩 略 图 的 辅助 方法 , 这 
个 辅助 方法 需要 一 个 参数 : 缩 略 图 的 路 径 。 然 后 用 这 个 辅助 方法 替换 掉 模 板 中 泻 染 神秘 生物 图 片 
的 代码 。 



















































































控制 居 








只 剩 MVC 中 的 C 没 有 介绍 了 。C 代 表 控 制 器 (controller )， 它 的 功能 曾 在 第 19 章 提 过 : 负责 应 
用 的 逻辑 , 获取 模型 实例 并 将 其 传递 给 视图 。 它 还 包含 一 些 处 理 程序 , 可 以 对 模型 实例 进行 修改 。 

这 一 章 要 开发 的 控制 器 并 不 会 包含 太 多 代码 。 因 为 按照 MVC 的 思想 ， 一 款 复杂 应 用 会 被 分 
解 成 多 个 部 分 ， 每 个 部 分 各 司 其 职 : 模型 负责 管理 数据 ， 视 图 负责 泻 染 界面 ,而 控制 右 只 负责 控 
制 模型 和 视图 。 

Ember 会 在 运行 时 自动 把 控制 器 对 象 添 加 到 应 用 中 。 有 了 控制 器 作为 代理 ， 模 型 数据 才能 在 
路 由 对 象 和 模板 之 间 传 递 。 如 果 没 有 主动 创建 控制 器 ，Ember 会 认为 应 用 只 需要 把 模型 数据 传 给 
模板 ， 它 会 自动 创建 一 个 这 样 的 控制 句 。 

通过 创建 控制 器 可 以 实现 许多 功能 , 例如 可 以 在 其 中 监听 事件 或 动作 。 也 可 以 在 控制 器 中 和 定 
义 装 饰 咒 ， 对 要 展示 的 数据 进行 调整 而 又 不 影响 模型 中 的 数据 。 

Tracker 应 用 的 主要 功能 之 一 是 让 用 户 自主 添加 目击 记录 。 为 了 实现 这 个 功能 , 需要 创建 一 个 
路 由 和 一 个 控制 项， 并 在 控制 器 中 添加 相关 的 属性 和 动作 。 

前 面 已 经 创建 了 新 建 目 击 记录 的 路 由 app/routes/sightings/new.js, 现在 需要 在 这 个 页 面 中 展示 
一 个 表单 ， 表单 中 要 有 神秘 生物 和 目击 者 的 列表 供用 户 选 择 ， 以 便 创建 新 的 目击 记录 。 每 一 条 目 
击 记录 都 会 关联 到 一 种 神秘 生物 和 一 位 或 多 位 目击 者 。 这 个 表单 如 图 24-1 所 示 。 
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O00 /Tcker ra 
各 © [DD localhost:4200/sightings/new 六 要 三 
Tracker Ssightings Cryptids Witnesses [RElements Console Sources Network » 3 
Q@ ip Y 国 Preserve log 
Fitter Regex Hide network messages 
Sightings (YY Erors wamings Info Logs Debug Handled 
it sa ember. debug, js:6395 
i j DEBUG: Ember : 2.4.4 ember. debug. is:6395 
New Sighting DEBUG: Ember Data : 2.4.3 ember. debug. is:6395 
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Select Cryptid $ UN tt ea mber. 2 
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Witnesses > 


Select Witnesses 
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Cancel 





图 24-1 ”新建 目 击 记录 的 表单 











准备 工作 完成 后 , 就 可 以 着 手 创建 用 于 管理 表单 中 各 种 事件 的 控 
提供 修改 和 删除 已 有 目击 记录 的 功能 。 


24.1 ”新建 目击 记录 








之 前 创建 的 目击 记录 的 模型 会 返回 全 部 目击 记录 数据 , 而 新 建 记录 的 模型 则 返回 新 创建 记录 
的 结果 。 此 外 ， 还 要 返回 一 系列 神秘 生物 和 目击 者 的 Promise 对 象 的 集合 ， 在 这 儿 用 的 是 





二 DA 仆 
Ember .RSVP.hash({})。 





打开 app/routes/sightings/new.js， 在 其 中 添加 model 钧 子 ， 返 回 值 是 用 Ember .RSVP.hash 处 理 


的 Promise 的 集合 : 


export default Ember.Route.extend({ 


model() { 
return Ember.RSVP.hash({ 
sighting: this.store.createRecord('sighting') 


}); 
} 


当 这 条 路 由 被 访问 时 , 一 条 新 的 目击 记录 会 被 返回 。 如 果 这 时 查看 记录 列表 ,就 能 看 到 一 条 





出 怖 了 。 除 此 之 外 ， 还 需要 
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空白 记录 , 这 正 是 我 们 刚刚 添加 的 记录 。 只 在 本 地 创建 了 这 条 数据 而 没有 将 其 同步 到 服务 器 
端 ， 所 以 它 是 一 条 脏 数据 ， 在 本 章 最 后 会 处 理 脏 数据 的 问题 。 就 目前 来 说 ， 只 需要 了 解 
createRecord 在 本 地 创建 了 一 条 新 的 目击 记录 就 可 以 了 。 

在 新 建 记 录 时 ， 用 到 了 神秘 生物 列表 和 目击 者 列表 。 这 里 用 Ember.RSVP.hash({}) 返 回 一 
个 Promise 的 对 象 。Ember .RSVP.hash({}) 的 参数 对 象 中 只 包含 一 个 属性 sighting， 它 代表 在 
演 染 模板 时 需要 用 到 model .sighting 的 数据 ， 也 就 是 刚刚 创建 的 目击 记录 。 

还 需要 在 模型 中 加 入 对 神秘 生物 和 目击 者 的 检索 ( 别 忘 了 this,store,createRecord 
('sighting') 后 面 的 逗号 ): 
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export default Ember.Route.extend({ 
model() { 
return Ember.RSVP.hash({ 
sighting: this.store.createRecord('sighting'), 
cryptids: this.store.findAll('cryptid'), 
witnesses: this.store.findAll('witness') 
}); 
} 
} 


在 新 建 记 录 的 模板 中 使 用 <seLect> 标 签 ， 为 用 户 提供 神秘 生物 列表 和 目击 者 列表 。 在 动手 
修改 模板 之 前 ， 先 来 介绍 一 个 Ember CLI 新 插件 ， 它 比 原生 的 <select> 标 签 更 简单 易 用 。 
在 终端 中 安装 emberx-select: 














ember install emberx-select 


这 个 插件 的 名 称 是 x-select， 在 模板 中 使 用 它 就 能 省 去 在 <select> 标 签 上 绑 定 onchange 事 件 
的 操作 。 

为 了 使 用 刚 安 装 的 x-select， 需 要 先 重 启 ember 服 务 器 。 

准备 工作 现 已 就 绪 ， 开 始 编辑 模板 。 修 改 app/templates/sightings/new.hbs， 在 其 中 添加 新 建 目 
击 记录 的 表单 : 


<hl>New Reute</h1> 
<hl>New Sighting</h1> 
<form> 
<div class="form-group"> 
<label for="name">Cryptid</label> 
{{#x-select value=model.sighting.cryptid class="form-control"}} 
{{#x-option}}Select Cryptid{{/x-option}} 
{{#each model.cryptids as |cryptid|}} 
{{#x-option value=cryptid}}{{cryptid.name}}{{/x-option}} 
{{/each}} 
{{/x-select}} 
</div> 
<div class="form-group"> 
<LabeL>Witnesses</LabeL> 
{{#x-select vaLue=modeL.sighting.witnesses multiple=true class="form-control"}} 
{{#x-option}}Select Witnesses{{/x-option}} 
{{#each model.witnesses as |witness|}} 
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{{#x-option value=witness}}{{witness.fullName}}{{/x-option}} 
{{/each}} 
{{/x-select}} 
</div> 
<div class="form-group"> 
<label for="location">Location</label> {{input value=model .sighting.location 
type="text" class="form-control" name="location" required=true}} 


</div> 
</form> 
哇 ! 这 段 代码 用 到 了 之 前 学 过 的 所 有 内 容 , 还 涉及 新 知识 。 路 由 用 到 了 一 个 新 的 Ember .RSVP 











方法 ,模板 用 到 了 辅助 函数 ， 还 学 习 了 新 组 件 {{x-select}} 和 {{x-option}}。 





{{x-select}} 组 件 的 本 质 是 构建 了 一 个 <select> 元 素 , 让 用 户 以 选择 的 方式 为 属性 赋值 。 








在 使 用 方式 上 , 它 与 <select> 差 别 不 大 , 在 赋值 时 使 用 的 是 Ember 提 供 的 数据 绑 定 。 这 里 使 用 
model.sighting.cryptid 为 {{x-select}} 的 value 属 性 赋值 。 当 用 户 选 择 新 的 列表 项 时 ， 
组 件 会 对 onchange 事 件 作 出 响应 ,这 么 做 可 行 是 因为 cryptid 属 性 需要 使 用 神秘 生物 的 记录 作 


























为 它 的 值 。 

















在 创建 目击 者 列表 时 , 需要 额外 添加 一 个 属性 multiple=true, 它 的 作用 是 允许 用 户 选 择 多 











个 目击 者 。 选 择 的 结果 会 转换 成 使 用 hasMany 描 述 的 目击 者 的 集合 。 








此 外 还 需要 在 目击 记录 列表 页 面 添 加 一 个 按钮 ， 链 接 到 新 建 记录 页 面 。 修 改 app/templates/ 


sightings.hbs， 在 其 中 添加 按钮 : 


<hl>Sightings</h1> 
<div class="row"> 
<div class="col-xs-6"> 
<h1>Sightings</h1> 
</div> 
<div class="col-xs-6 h1"> 
{{#link-to "sightings.new" class="pull-right btn btn-primary"}} 
New Sighting 
{{/Link-to}} 
</div> 
</div> 
{{outlet}} 


这 里 利用 Bootstrap 提 供 的 样式 创建 了 一 个 按钮 ， 访 问 http:/localhost:4200/sightings 查 看 效果 




















( 如 图 24-2 所 示 )。 
新 建 记录 的 页 面 现在 有 了 入 口 , 在 所 有 与 目击 记录 相关 的 页 面 中 都 能 看 到 这 个 按钮 ,点击 它 
就 可 以 创建 目击 记录 。 

















请 注意 ， 当 处 在 sightings.new 页 面 时 ， 新 建 目击 记录 的 按钮 是 高 亮 的 ， 这 是 因为 Ember 会 自 

















动 为 指向 当前 路 由 的 链接 添加 active 类 名 。 这 么 做 的 目的 是 给 用 户 视 觉 上 的 提示 ,便于 用 户 区 
分 指向 当前 页 面 的 是 哪个 链接 。 
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图 24-2 新建 目击 记录 按钮 


在 应 用 中 ,动作 是 处 理 表单 事 件 和 其 他 各 类 事件 的 核心 。actions 属 性 是 一 个 对 象 ， 包含 
许多 事件 名 称 到 方法 的 映射 ， 在 模板 中 需要 通过 这 些 名 称 来 调用 对 应 的 方法 。 

现在 来 着 手 创建 sightings.new 路 由 的 控制 器 ， 在 命令 行 中 执行 : 

ember g controller sightings/new 

Ember 生 成 了 app/controllers/sightings/new.js 文 件 。 打开 文件 , 添加 create 和 cancel 两 个 动作 ， 
在 创建 目击 记录 时 需要 用 到 它们 : 


import Ember from "ember '; 























export default Ember.Controller.extend({ 
actions: { 
create() { 
}, 
cancel() { 


} 
}); 
一 般 情 况 下 ， 需 要 为 表单 元 素 设 置 一 个 action 属 性 ， 当 表单 提交 时 会 向 action 指 定 的 URL 
发 送 请 求 。 但 对 于 Ember 应 用 来 说 ， 只 需要 为 表单 指定 一 个 动作 名 称 ， 这 个 动作 就 会 在 表单 提交 
时 和 触发 。 
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修改 app/templates/sightings/new.hbs， 为 表单 元 素 添加 用 于 提交 的 动作 。 同 时 也 在 表单 的 后 面 
添加 Create 和 Cancel 这 两 个 按钮 ; 

<hl>New Sighting</h1> 

<form {{action "create" on="submit"}}> 


<div class="form-group"> 
<label for="location">Location</label> {{input value=model.location 


type="text" class="form-control" name="location" required=true}} 
</div> 


<button type="submit" class="btn btn-primary btn-block">Create</button> 


<button {{faction 'cancel'}} class="btn btn-Link btn-block">Cancel</button> 
</form> 


正常 情况 下 ，Atom 编 辑 器 无 法 识别 {{faction}} 这 种 语法 ， 所 以 它 会 报错 ， 这 种 错误 可 以 忽 
略 。 当 然 ， 也 可 以 为 Atom 安 装 Language-Mustache 扩 展 包 。 在 设置 中 启用 后 ，Atom 就 可 以 识别 这 
种 语法 了 。 包 的 地 址 是 atom.io/packages/language-mustache。 

在 调用 {{action}} 时 传人 了 字符 串 类 型 的 参数 ,与 app/controllers/sightings/new.js 中 创建 的 动 
作 相 对 应 ， 这 些 动作 都 绑 定 了 各 自 的 事件 处 理 程序 。{{faction}} 的 另 一 个 参数 是 on， 它 代表 触 
发 这 个 动作 的 操作 类 型 。 默 认 是 通过 点 击 触发 ， 如 果 on 为 空 则 使 用 默认 值 。 

对 表单 中 的 {{faction}} 使 用 on="submit"， 表 示 在 表单 提交 时 触发 动作 。 不 对 取消 按钮 上 
的 {{action}} 添 加 on 属性 ， 也 就 意味 着 使 用 默认 值 ， 在 点 击 操作 时 触发 动作 。 

控制 器 中 定义 的 动作 已 经 能 够 实现 表单 的 提交 或 取消 ， 但 这 些 动作 的 实现 代码 目前 还 是 空 
的 。 现 在 来 创建 这 些 动作 ， 用 下 面 的 代码 替换 app/controllers/sightingsmnew.js 中 的 对 应 内 容 ， 保 存 
后 返回 目击 记录 列表 页 面 : 






























































actions: { 
create() { 
var self = this; 
this.get('model.sighting').save().then(function() { 
self.transitionToRoute('sightings'); 
}); 


Ga 让 本 省 { 


} 
}); 
create 方 法 会 在 表单 提交 时 被 调用 。 首 先 在 这 个 方法 中 创建 self 变 量 指 向 控制 右 自 身 ， 接 
着 获取 sighting 模 型 并 调用 save。 
最 后 一 步 是 把 数据 保存 到 服务 端 。 每 个 模型 对 象 上 都 有 一 个 hasDirtyAttributes 属 履 
会 在 保存 完 模型 后 被 设置 为 false。 
模型 在 保存 时 会 返回 一 个 Promise 对 象 。 调 用 Promise 的 then 方 法 , 传 入 一 个 回调 函数 ， 这 
个 回调 函数 会 在 模型 保存 成 功 后 调用 。 最 后 使 用 transitionToRoute 返 回 目击 记录 列表 页 。 
访问 http:/Wlocalhost:4200/sightingsmnew， 查 看 创建 的 表单 (如 图 24-3 所 示 )。 
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图 24-3 ”新 建 目击 记录 表单 








填写 表单 后 点 击 Create。 虽 然 已 经 添加 了 一 条 新 记录 ， 但 是 在 这 里 看 到 的 还 是 之 前 的 模拟 数 
据 。 修 改 appmroutes/sightingsjs， 删 除 模拟 数据 ， 换 成 从 服务 器 端 获 取 的 目击 记录 数据 。 


import Ember from "ember '; 


export default Ember.Route.extend({ 
model() { 








return Frecord1l, record2, recerd3]; 


return this.store.findAll('sighting', {reload: true}); 


} 
}); 
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现在 ， 应 用 已 经 具备 了 创建 和 检索 的 功能 。 

注意 findALL 方 法 的 第 二 个 参数 , 它 是 一 个 配置 对 象 , 其 中 只 包含 了 retLoad 一 个 属性 。 这 个 
参数 告诉 store 在 每 次 调用 路 由 模型 时 都 从 API 请 求 最 新 的 数据 。 添 加 这 个 参数 表明 在 每 次 加 载 
列表 时 都 希望 展示 最 新 的 数据 。 

接 下 来 处 理 cancel 动 作 ， 在 执行 cancel 时 需要 删除 内 存 中 目击 记录 实例 的 脏 数据 。 和 第 21 
章 一 样 ， 这 里 也 使 用 model.deleteRecord 方 法 删除 数据 ， 把 它 添加 到 app/controllers/sightings/ 
new.js 中 : 



































actions: { 
create() { 
var self = this; 
this.get('model.sighting').save().then(function() { 
self.transitionToRoute('sightings'); 


}); 


cancel() { 
this.get('model.sighting').deleteRecord(); 
this.transitionToRoute('sightings'); 
} 
} 


删除 操作 完成 后 , 用户 会 回 到 列表 页 。 这 里 使 用 的 方案 只 针对 用 户 点 击 取消 按钮 的 情况 , 但 
是 如 果 用 户 使 用 导航 条 直接 跳 转 到 列表 页 或 其 他 页 面 呢 ? 

如 果 这 条 脏 数据 没有 被 删除 , 那么 直到 用 户 关闭 浏览 器 为 止 , 它 都 会 一 直 保 存在 内 存 中 。 为 
了 能 及 时 删除 这 条 脏 数据 ， 需 要 在 路 由 中 添加 一 个 动作 。 

在 路 由 的 生命 周期 中 , 有 一 些 预定 的 动作 会 因 路 由 的 特定 状态 或 路 由 状态 的 转变 而 触发 。 可 
以 通过 覆盖 这 些 动作 ， 实 现在 路 由 变换 时 执行 指定 的 操作 。 

修改 app/routes/sightings/new.js， 添 加 wilLTransition 动 作用 于 删除 脏 数 据 : 







































































model(){ 
return Ember.RSVP.hash({ 
sighting: this.store.createRecord('sighting'), 
cryptids: this.store.findAll('cryptid'), 
witnesses: this.store.findAll('witness') 
}); 
}, 
actions: { 
willTransition() { 
var sighting = this.get('controller.model.sighting'); 
if(sighting.get('hasDirtyAttributes')){ 
sighting.deleteRecord(); 
} 
} 
} 
}); 


























当 路 由 改变 时 会 触发 wiLLTransition。 在 这 个 方法 中 ， 首 先 判断 hasDirtyAttributes 是 
否 为 true， 如 果 为 true 则 会 调用 deLeteReco rd 销毁 模型 对 象 。 

这 些 修改 解决 了 创建 记录 时 的 脏 数 据 问题 , 同时 只 对 控制 器 做 了 最 小 的 修改 就 把 数据 保存 到 
服务 端 。 
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在 创建 〈 create ) 和 读 取 (read ) 数据 之 后 ， 按 照 CRUD 的 顺序 ， 下 一 步 应 该 更 新 (update ) 
数据 。 虽 然 已 经 创建 了 更 新 数据 的 路 由 , 但 是 还 没有 添加 编辑 入 口 。 接 下 来 在 目击 记录 的 列表 中 
添加 编辑 按钮 。 同 时 ， 要 在 编辑 记录 的 模板 中 添加 一 个 表单 ， 其 中 包含 目击 记录 相关 的 字段 。 此 
外 ， 修 改编 辑 目 击 记录 的 模型 ， 增 加 对 目击 者 、 神 秘 生 物 和 目击 记录 的 检索 。 修 改 app/router'js， 
在 编辑 目击 记录 的 路 由 上 加 入 动态 参数 。 最 后 ， 创 建 一 个 控制 器 为 表单 添加 动作 。 

打开 app/templates/sightings/index.hbs ， 在 列表 中 添加 编辑 按钮 。 为 了 使 列表 页 更 加 丰富 ， 还 
要 添加 神秘 生物 的 名 称 和 图 片 。 









































<div class="media well"> 
<img class="media-object thumbnail" src="{{if sighting.cryptid.profileImg 
sighting.cryptid.profileImg 'assets/images/cryptids/blank_th.png'}}" 
alt="{{sighting.cryptid.name}}" width="100%" height="100%"> 
<div class="caption"> 
<h3>{{sighting.cryptid.name}}</h3> 
{{#if sighting.location}} 
<h3>{{sighting.location}}</h3> 
<p>{{moment-from sighting.sightedAt}}</p> 
{{else}} 
<h3 class="text-danger">Bogus Sighting</h3> 
{{/if}} 
</div> 
{{t#Link-to 'sighting.edit' sighting.id tagName="button" 
class="btn btn-success btn-block"}} 
Edit 
{{/Link-to}} 
</div> 





访问 http://localhost:4200/sightings ， 查 看 编辑 按钮 ( 如 图 24-4 所 示 )。 
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图 24-4” 带 有 编辑 按钮 的 列表 页 
接 下 来 修改 routerjs， 为 编辑 目击 记录 的 路 由 添加 动态 参数 。 


this.route('sighting', function() { 
this.route('edit', {path: "sightings/:sighting id/edit"}); 
}); 


接 下 来 修改 app/routes/sightings/edit.js ， 添 加 对 目击 记录 、 神 秘 生物 和 目击 者 的 检索 方法 : 


export default Ember.Route.extend({ 
model(params) { 
return Ember.RSVP.hash({ 
sighting: this.store.findRecord('sighting', params.sighting_ id), 
cryptids: this.store.findALL('cryptid' )， 
witnesses: this.store.findALL('witness' ) 
}); 
} 
}); 


接 下 来 修改 app/templates/sightings/edit.hbs， 在 模板 中 加 入 编辑 记录 的 表单 ， 这 个 表单 和 新 建 
记录 的 表单 几乎 没有 差别 。 


{{outtlet}} 
<h1>Edit Sighting: 
<small> 
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{{model .sighting.location}} - 
{{moment-from model.sighting.sightedAt}} 
</small> 
</h1> 
<form {{action "update" modeL on="submit"}}> 
<div class="form-group"> 
<label for="name">Cryptid</label> 
{{input value=model .sighting.cryptid.name type="text" class="form-control" 
name="location" disabled=true}} 
</div> 
<div class="form-group"> 
<LabeL>Witnesses</LabeL> 
{{#each model.sighting.witnesses as |witness|}} 
{{input vaLue=witness.fuLLName type="text" class="form-control" 
name="location" disabled=true}} 
{{/each}} 
</div> 
<div class="form-group"> 
<label for="location">Location</label> 
{{input value=model .sighting.Tlocation type="text" class="form-control" 
name="Location" required=true}} 
</div> 
<button type="submit" class="btn btn-info btn-block">Update</button> 


<button {{faction 'cancel'}} class="btn btn-block">Cancel</button> 
</form> 


现在 只 剩 下 控制 器 没有 完成 了 。 在 控制 需 中 创建 表单 动作 的 响应 方法 。 另 外 , 由 于 目前 上 
修改 地 址 ， 所 以 要 暂时 禁用 神秘 生物 和 目击 者 字段 。 
创建 控制 器 : 


ember g controller sighting/edit 

















打开 刚 生 成 的 文件 app/controllers/sightings/editjs ， 添 加 update 和 cancel 两 个 动作 : 


import Ember from 'ember'; 


export default Ember.Controller.extend({ 
sighting: Ember.computed.alias('model.sighting'), 
actions: { 
update() { 
if(this.get('sighting').get('hasDirtyAttributes')){ 
this.get('sighting').save().then(() => { 
this.transitionToRoute('sightings'); 
}); 
} 
}, 
cancel() { 
if(this.get('sighting').get('hasDirtyAttributes')){ 
this.get('sighting').rollbackAttributes(); 
} 


this.transitionToRoute('sightings'); 


}); 


/ 


EC 
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和 创建 记录 时 一 样 ， 提 交 修 改 时 也 只 需要 调用 save。Ember 会 自动 进行 判断 ， 只 有 在 记录 发 
生 改 变 时 ， 即 sighting.get('hasDirtyAttributes') 为 true 时 才 向 API 发 起 请 求 。 

注意 一 下 这 里 的 Ember.computed.aLias， 它 的 功能 是 为 属性 创建 别名 ， 可 用 于 任何 属性 ， 
尤其 对 衣 套 比较 深 的 属性 特别 有 用 。 通 过 这 个 计算 属性 ， 我 们 在 使 用 sighting 时 可 以 少 写 许多 
代码 。 
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时 不 时 就 会 有 一 些 目击 记录 被 证 实 是 骗局 ,虽然 并 不 多 , 但 确实 需要 一 种 用 来 删除 虚假 或 者 
陈旧 数据 的 方法 。 回 想 一 下 ， 在 第 21 章 中 曾 使 用 record.destroyRecord 删 除 过 记录 。 
首先 在 app/templates/sightings/edit.hbs 中 添加 一 个 删除 按钮 。 


<button type="submit" class="btn btn-info btn-block">Update</button> 
<button {{action 'cancel'}} class="btn btn-block">Cancel</button> 
</form> 















































| 


<hr> 

<button {{faction 'delete'}} class="btn btn-bLock btn-danger"> 
Delete 

</button> 


除了 按钮 外 ,再 添加 一 条 水 平 线 , 作用 是 把 删除 按钮 和 表单 中 的 更 新 和 取消 按钮 分 隔 开 。 这 
里 的 <hr> 是 一 个 有 效 的 视觉 工具 ， 它 可 以 明确 地 提醒 用 户 删 除 操作 与 编辑 操作 有 所 区 别 。 
接 下 来 ， 在 app/controllers/sightings/edit.js 中 添加 删除 动作 : 





























cancel() { 
if(this.get('sighting').get('hasDirtyAttributes')){ 
this.get('sighting').rollbackAttributes(); 
3 


this.transitionToRoute('sightings'); 


}, 
delete() { 
var self = this; 
if (window.confirm("Are you sure you want to delete this sighting?")) { 
this.get('sighting').destroyRecord().then(() => { 
self.transitionToRoute('sightings'); 


}); 


} 
} 
}); 


加 除 动作 使 用 了 window.confirm 让 用 户 对 操作 进行 确认 。 除 了 多 一 个 判断 语句 外 ， 删 除 动 
作 与 其 他 动作 的 逻辑 并 无 不 同 : 获取 模型 ， 调 用 方法 ， 当 API 请 求 完 成 时 执行 异步 回调 。 

打开 http:/localhost:4200/sightings， 任 选 一 条 记录 ， 点 击 编辑 按钮 。 新 打开 的 页 面 即 为 app/ 
templates/sightings/edit.hbs 模 板 演 染 后 的 效果 ,其 中 就 能 看 到 新 添加 的 删除 按钮 (如 图 24-5 所 示 )。 
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生息 四 / DTaceer 到 
所 C localhost:4200/sighting/sightings/570f0b6fc72248030060bed8/edit 立 孚 三 
Tracker Sightings Cryptids Witnesses [3 口 Elements Console Sources Network Timeline Profiles » x 
© top v Preserve log 
ter Regex Hide network messages 
Edit Sighting: Atlanta, GA - a few seconds ago (DN Erors Warnings Info Logs Debug Handled 
Cryptid DEBUG: 一 一 -一 一 -一 一 -一 ember,debug,js:6395 
Aaron DEBUG: Ember : 2.4.4 ember. debug. js:6395 
DEBUG: Ember Data ; 2.4.3 ember. debug. js:6395 
Witnesses DEBUG: jQuery : 2.2.3 ember. debug. jis:6395 
a DEBUG: 一 一 一 一 一 一 一 -一 一 -一 ember,debug,js:6395 
> 
Location 
Atlanta, GA 


Py 
Cancel 
Delet 


Console Animations x 


图 24-5 ”编辑 目击 记录 的 表单 
从 创建 到 销毁 ， 与 记录 相关 的 各 种 操作 都 已 经 完成 了 。 


24.4 ”路 由 动作 


动作 并 不 是 控制 器 独 有 的 。 路 由 也 可 以 为 模板 定义 动作 ,还 可 以 重 写生 命 周 期 里 的 动作 。 调 
用 一 个 动作 时 ， 它 会 沿 着 模板 -控制 吉 - 路 由 - 父 级 路 由 的 路 径 一 路 向 上 。 

如 果 不 单独 定义 控制 器 ， 路 由 也 可 以 代替 控制 器 ,实现 它 的 功能 。 这 一 点 似乎 与 前 面 讨论 的 
应 用 逻辑 分 离 相 互 矛 盾 , 但 其 实 Ember 把 控制 器 的 工作 分 为 了 两 个 部 分 : 路 由 信息 和 控制 器 逻辑 。 
有 时 候 会 在 路 由 中 包含 较 多 逻辑 , 而 有 时 候 会 在 控制 器 中 包含 较 多 逻辑 。 应 用 中 可 能 有 一 些 逻 辑 
被 分 割 成 小 块 代码 ， 但 同时 也 有 一 些 文件 中 堆积 了 多 个 动作 和 装饰 器 。 

为 了 和 弄 明 白 路 由 如 何 充当 控制 句 ， 把 create 和 cancet 事 件 的 定义 从 app/controllers/sightings/ 
new.js 移 动 到 app/routes/sightings/new.js。 通 过 这 样 的 修改 ， 也 能 从 男 一 个 角度 理解 这 些 方 法 和 对 
象 。 而 且 如 果 只 想 使 用 路 由 和 组 件 (下 一 章 会 介绍 ) 来 控制 整个 应 用 的 视图 ， 这 也 是 个 好 方案 。 

首先 ， 在 app/routes/sightings/mnew.js 中 添加 动作 : 


import Ember from 'ember'; 
































export default Ember.Route.extend({ 
model() { 





24.4 ”路 由 动作 
}, 


sighting: Ember.computed.alias('controller.model.sighting'), 
actions: { 
willTransition() { 
var sighting = this.get('controller.model.sighting'); 
if(sighting.get('hasDirtyAttributes')) { 
sighting.deleteRecord(); 
}, 
create() { 
var self = this; 
this.get('sighting').save().then(function(data) { 
self.transitionTo('sightings'); 


}); 


cancel() { 
this.get('sighting').deleteRecord(); 
this.transitionToRoute('sightings'); 
} 


} 
}); 





























| 
































性 时 你 需要 明确 这 个 对 象 存在 的 位 置 ， 因 为 路 由 中 的 modeL 和 控 
的 modeL 并 不 是 同一 个 对 象 。 为 了 能 从 路 


中 获取 控制 器 的 sighting 
get('controller.model.sighting')。 为 了 


减少 元 余 代 码 ， 可 以 为 它 起 一 个 别名 。 
然后 ， 从 app/controllers/sightings/new.js 中 删除 动作 : 























import Ember from 'ember'; 


export 


default Ember.Controller.extend({ 
actions: { 


}); 











请 确保 修改 后 的 文件 已 经 重新 加 载 (或 者 ember 服 务 器 已 经 重启 )。 访问 http://localhost:4200/ 


sightings/mew ， 在 其 中 添加 一 条 新 记录 以 确保 路 由 中 的 动作 可 以 正常 工作 。 
这 时 app/controllers/sightings/mew.js 文 伯 


























F 已 经 有 些 多 余 了 ,可 以 删 掉 它 , 使 目录 变 得 清 更 一 些 。 
虽然 删除 了 控制 器 文件 ， 但 在 运行 时 Ember 仍 会 为 应 用 创建 默认 的 控制 器 对 象 。 


在 


怎样 为 模板 创建 动作 和 





这 一 章 重 点 关注 了 Ember 的 控制 器 ， 学 习 了 








属性 ， 怎 样 在 保存 数据 后 


这 段 代码 也 使 用 Ember .computed.alias 为 sighting 对 象 创建 了 一 个 别名 。 不 同 的 是 ， 当 
从 路 由 中 获取 控制 器 的 属 


397 


判 器 中 
属性 ， 需 要 使 用 
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跳 转 到 新 页 面 ， 以 及 怎样 在 取消 保存 或 切换 到 其 他 页 面 时 销毁 记录 。 通 过 使 用 动作 ， 可 以 用 简单 
的 回调 函数 完成 对 模型 数据 的 修改 。 另 外 ,使 用 控制 器 可 以 设置 页 面 独 有 属性 ， 而 不 需要 向 模型 
数据 添加 关系 。 最 后 ， 还 完成 了 对 目击 记录 的 更 新 和 删除 ， 实 现 了 完整 的 CRUD 操 作 。 

出 于 快速 开发 的 考量 ，Ember 不 强制 开发 者 使 用 控制 器 ， 而 是 允许 将 一 些 控制 器 的 细节 在 路 
中 实现 。 此 外 , 还 可 以 通过 控制 器 来 微调 视图 和 控制 模型 数据 ,动作 是 应 用 与 用 户 交 互 的 核心 ， 
而 且 动 作 还 可 以 存在 于 路 由 、 控 制 器 和 组 件 中 。 组 件 会 在 下 一 章 (也 是 最 后 一 章 ) 进行 讲解 。 


24.5 初级 挑战 : 目击 记录 详情 页 


请 创建 一 个 目击 记录 的 详情 页 面 , 相关 的 文件 是 app/templates/sightings/index.hbs 和 app/routes/ 
sightings.js。 在 这 个 页 面 中 展示 神秘 生物 的 图 片 、 目 击 地 点 以 及 目击 者 的 列表 ， 要 是 能 加 上 编辑 
按钮 就 更 好 了 。( 提示 : 可 以 直接 在 路 由 中 添加 动作 。) 


24.6 ”中 级 挑战 ， 目击 日 期 


在 创建 和 编辑 目击 记录 时 ， 给 控制 器 中 添加 一 个 sightingDate 属 性 ， 在 模板 中 创建 对 应 的 
表单 元 素 与 该 属性 进行 绑 定 。 在 添加 日 期 输入 框 时 ， 既 可 以 简单 地 使 用 纯 文 本 ， 也 可 以 使 用 
input[type="date"] 。 用 moment 库 将 获取 到 的 日 期 转化 成 FSO8601 规 定 的 日 期 格式 ， 然 后 赋 给 
目击 记录 的 sightingAt 属 性 。 


24.7 ”高 级 挑战 : 添加 和 删除 目击 者 


在 创建 目击 记录 时 ， 根 据 用 户 在 <seLect> 元 素 中 点 击 触发 的 onchange 事 件 ， 构 造 出 对 应 的 
目击 者 列表 。 请 创建 一 个 新 属性 用 于 临时 保存 目击 者 列表 。 在 用 户 提交 表单 时 , 将 这 个 属性 的 值 
赋 给 目击 记录 的 witnesses 属 性 。 

另外 请 在 页 面 中 展示 已 选 的 目击 者 列表 , 同时 为 其 中 的 每 个 选项 添加 一 个 删除 按钮 。 当 一 个 
目击 者 被 用 户 选择 后 ， 需 要 把 它 从 <seLect> 的 选项 中 移 除 。 可 以 用 这 两 个 动作 : addWitness 和 


removeWitness。 


































































































































































































组 件 
































在 Ember 中 , 组 件 是 包含 视图 和 控制 器 属性 的 对 象 。 组 件 背 后 的 理念 是 为 可 重用 的 DOM 元 素 
创建 独立 的 作用 域 或 者 上 下 文 环境 。 组 件 会 包含 一 些 属性 , 通过 这 些 属性 可 以 定制 组 件 输出 的 内 
容 和 样式 。 男 外 ,组 件 还 可 以 通过 属性 接受 从 父 控制 器 或 父 级 路 由 传 来 的 动作 ( 如 图 25-1 所 示 )。 


控制 器 My-Button 
”| {text:"Login"} 一 一 组 件 Login 
pe My-Button 
控制 器 


图 25-1 组件 属 性 


回 过 头 来 看 整个 应 用 , 你 会 发 现 许 多 代码 片段 都 出 现在 多 个 模板 中 , 而 且 相 互 之 间 差 异 不 大 。 
如 果 一 个 片段 可 以 从 模板 中 抽取 出 来 并 通过 变量 来 描述 状态 , 那么 这 个 代码 片段 就 很 适合 转化 成 
一 个 组 件 。 

本 章 会 提供 一 些 简单 的 示例 ， 展 示 怎 样 将 DOM 元 素 包装 成 JavaScript 对 象 ( 组件 ), 然后 把 它 
用 在 多 个 页 面 中 。 组 件 的 逻辑 有 些 类 似 于 第 23 章 的 辅助 方法 ， 它 们 以 标签 属性 的 形式 接受 参数 ， 
然后 经 过 一 些 处 理 最 终 输出 HTML 代码 。 组 件 也 拥有 自己 的 动作 和 属性 ， 可 以 通过 与 用 户 交 互 更 
新 自己 的 状态 。 

本 章 内 容 只 是 开发 可 扩展 应 用 的 冰山 一 角 。 在 现实 中 一 球 复杂 的 应 用 可 能 拥有 上 百 个 页 面 ， 
为 了 提高 应 用 界面 的 一 致 性 和 代码 的 可 维护 性 ，Ember 会 高 度 依 赖 组 件 。 本 章 中 的 例子 只 是 现实 
项 目的 一 个 缩影 ， 但 它们 的 开发 思路 是 一 致 的 : 将 模板 的 内 容 替 换 成 可 重用 的 页 面 和 单个 元 素 。 


25.1 ”和 迭 代 器 组 件 
通常 可 以 把 {{#each}} 送 代 演 染 的 一 组 元 素 转 换 成 组 件 , 这 也 是 把 代码 片段 转化 成 组 件 的 一 
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个 典型 案例 。 和 迭代 器 可 能 在 每 一 次 迭代 时 都 需要 演 染 一 个 <div> 作 为 容器 ， 然 后 根据 被 迭代 对 象 
的 属性 在 容器 中 泻 染 标题 、 图 片 路 径 、 按 钮 并 调整 元 素 的 样式 。 为 了 能 重用 这 些 代码 ， 可 以 将 它 
们 包装 成 组 件 模 板 。 此 外 还 需要 创建 一 个 组 件 JavaScript 文 件 。 组 件 文件 有 些 类 似 于 控制 器 , 可 以 
在 其 中 创建 装饰 侨 和 动作 的 响应 方法 。 

目击 记录 列表 就 是 用 {{#each}} 演 染 的 , 要 创建 的 第 一 个 组 件 就 是 这 个 列表 的 单个 元 素 。 首 
先 通 Ember CLI 创 建 一 个 组 件 ， 在 终端 中 运行 : 


ember g component listing-item 





























这 条 命令 会 创建 三 个 文件 : app/components/listing-item.js 、app/templates/components/listing- 


item.hbs 和 tests/integration/components/listing-item-test.js( 用 于 测试 )。 
在 创建 好 组 件 后 ， 找 出 需要 替换 成 组 件 的 代码 片段 。 打 开 app/templates/sightings/index.hbs 模 
板 ,下 面 这 段 代 码 中 的 一 部 分 将 被 移动 到 组 件 模 板 中 ， 先 大 致 浏览 一 下 : 


<div class="row"> 
{{#each model as |sighting|}} 
<div class="col-xs-12 col-sm-3 text-center"> 
<div class="media well"> 
<img class="media-object thumbnail" src="{{if sighting.cryptid.profileImg 
sighting.cryptid.profileImg 'assets/images/cryptids/blank th.png'}}" 
alt="{{sighting.cryptid.name}}" width="100%" height="100%"> 
<div class="caption"> 
<h3>{{sighting.cryptid.name}}</h3> 
{{#if sighting.location}} 
<h3>{{sighting.location}}</h3> 
<p>{{moment-from sighting.sightedAt}}</p> 
{{else}} 
<h3 class="text-danger">Bogus Sighting</h3> 
{{/if}} 
</div> 
{{#link-to 'sighting.edit' sighting.id tagName="button" 
class="btn btn-success btn-block"}} 
Edit 
{{/Llink-to}} 
</div> 
</div> 
{{/each}} 
</div> 


这 段 代 码 中 的 容器 <div> ( 阴影 标注 的 ) 使 用 了 类 名 col-xs-12， 也 就 是 说 元 素 的 尺寸 是 固 
定 的 , 也 是 为 当前 页 面 定 制 的 。 如 果 直 接 把 它 用 在 组 件 中 ,那么 整个 应 用 中 所 有 使 用 该 组 件 的 位 
置 都 将 展示 同样 尺寸 的 列表 。 

不 过 可 以 将 <div class="media well"> 容 器 及 其 内 容 迁 移 到 组 件 中 ， 这 样 组件 就 可 以 适用 
于 各 种 大 小 的 容器 ,而 单个 列表 条 目的 结构 并 不 会 发 生变 化 。 组 件 中 包含 的 是 列表 条 目的 主要 元 
素 ， 包 括 media 容 器 、 图 片 、 标 题 和 编辑 按钮 。 

打开 app/templates/components/listing-item.hbs， 在 其 中 添加 神秘 生物 的 图 片 和 名 称 : 
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<img class="media-object thumbnail" src="{{imagePath}}" alt="{{name}}" 
width="100%" height="100%"> 

<div class="caption"> 
<h3>{{name}}</h3> 


{{yield}} 
</div> 


从 外 部 来 看 ， 一 个 组 件 就 像 一 个 独立 DOM 元 素 ， 组 件 模 板 中 所 有 的 子 元 素 也 就 是 这 个 DOM 
元 素 的 子 元 素 。 在 默认 情况 下 ，Ember 的 HTMLBars 引 擎 会 通过 JavaScript 创 建 一 个 <div> 元 素 作 
为 容器 ， 然 后 在 这 个 容器 中 泻 染 组 件 模 板 。 

上 面 的 代码 包含 一 张 图 片 和 一 个 标题 元 素 ， 它 们 会 被 添加 到 由 {{#Listing-item}} 创 建 的 
<div> 容 器 中 。 和 普通 的 模板 一 样 ， 在 组 件 的 模板 中 也 可 以 浑 染 变量 等 一 些 动态 内 容 〈( 先 忽略 代 
码 中 的 {{yield}}， 稍 后 介绍 它 )。 

巴 组 件 添加 到 页 面 模板 中 ， 它 会 泻 染 出 如 下 内 容 : 


<div> 
<img class="media-object thumbnail" src="[cryptid's imagePath string]" 
alt="[cryptid's name string]" width="100%" height="100%"> 
<div class="caption"> 
<h3>[cryptid's name string]</h3> 
{{yield}} 
</div> 
</div> 


模板 中 动态 的 部 分 ( 例如 {{name}} 和 {{imagePath}} ) 通 过 属性 的 形式 传人 组 件 。 {{yield}} 
用 于 在 它 所 处 的 位 置 泻 染 传人 组 件 的 子 元 素 。 组 件 的 模板 文件 用 于 布局 或 展现 主要 元 素 ， 而 
{{yietld}} 则 用 于 在 每 个 组 件 实 例 中 演 染 不 同 的 子 元 素 。 稍 后 就 会 用 到 {{yield}}。 

尽管 最 终 不 会 把 app/templates/sightingsindex.hbs 中 的 内 容 替 换 成 上 面 的 标签 ， 但 是 这 样 更 好 
理解 。 

将 app/templates/sightings/index.hbs 中 的 内 容 换 成 组 件 : 


<div class="row"> 

{{#each model as |sighting|}} 
<div class="col-xs-12 col-sm-3 text-center"> 
<div class="media weLt'"> 
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Edit 

{t/tink-te}} 

</div> 

{{#1listing-item imagePath=sighting.cryptid.profileImg 
name=sighting.cryptid.name}} 

{{/listing-item}} 

</div> 
{{/each}} 


</div> 








这 里 只 用 了 一 行 代码 就 替换 了 之 前 的 大 段 代码 ,虽然 目前 功能 还 不 完备 , 不 过 很 快 就 会 补 上 。 
接 下 来 把 组 件 的 容 顺 上 缺失 的 类 名 "media" 和 "wetLL'" 补 回来 。 

修改 app/components/listing-item.js， 为 组 件 添加 classNames 属 性 : 

import Ember from 'ember'; 














export default Ember.Component.extend({ 
classNames: ["media", "well"] 


由 区 


在 组 件 创建 <div> 容 器 时 ， 会 取 这 里 的 cLassNames 属 性 的 值 作为 容器 的 类 名 。 
修改 后 的 组 件 会 泻 染 出 如 下 代码 : 


<div class="media well"> 














<img class="media-object thumbnail" src="[imagePath string]" alt="[name string]" 
width="100%" height="100%"> 


<div class="caption"> 
<h3>[name string]</h3> 
{{yield}} 
</div> 
</div> 


接 下 来 要 为 组 件 添加 子 元 素 ， 这些 元 素 会 被 演 染 在 组 件 模 板 中 {{yield}} 的 位 置 。 当 不 同 页 
面 调用 同一 组 件 时 , 就 可 以 在 组 件 中 展示 不 同 的 内 容 。 打开 app/templates/sightings/index.hbs 文 件 ， 
添加 下 面 的 代码 ， 它 们 会 被 演 染 到 {{yield}} 所 在 的 位 置 。 














{{#listing-item imagePath=sighting.cryptid.profiLeImg 
name=sighting.cryptid.name}} 
{{#if sighting.Tlocation}} 
<h3>{{sighting.location}}</h3> 
<p>{{moment-from sighting.sightedAt}}</p> 
{{else}} 
<h3 class="text-danger">Bogus Sighting</h3> 
{{/if}} 
{{#Link-to 'sighting.edit' sighting.id tagName="button" 
class="btn btn-success btn-block"}} 
Edit 
{{/Link-to}} 
{{/listing-item}} 


这 上段 代码 你 应 该 不 陌生 ， 它 会 为 目击 记录 列表 添加 缺失 的 位 置信 息 、 时 间 信 











息 和 编辑 按钮 。 
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25.2 “ 拧 干 ”组 件 的 “水 分 ” 


现在 是 时 候 让 你 的 代码 变 “DRY” 了 。 
什么 意思 ? DRY, 不 是 真 的 变 “ 干 ”"， 而 是 Dont’*t Repeat Yourself ( 不 要 重复 你 自己 ) 的 缩写 。 
这 是 一 种 编码 原则 ， 简 单 来 说 就 是 同样 的 逻辑 在 一 份 代码 中 只 出 现 一 次 。 
回想 一 下 ， 目 击 记录 列表 和 神秘 生物 列表 都 包含 了 一 个 cLass="media wel1l" 的 容器 ， 在 容 
器 中 都 有 图 片 和 标题 。 所 以 这 些 代 码 是 可 以 进行 DRY 优 化 的 。 虽 然 这 两 个 列表 结构 并 不 完全 相同 ， 
但 是 可 以 通过 {{yield}} 解 决 。 
首先 将 刚刚 创建 的 {{#1Listing-item}} 组 件 添加 到 神秘 生物 列表 里 。 打 开 app/templates/ 
cryptids.hbs 模 板 ， 将 <div class="media well"> 元 素 和 它 的 子 元 素 蔡 换 成 如 下 代码 : 
<div class="row"> 
{{#each model as |cryptid|}} 
<div class="col-xs-12 col-sm-3 text-center"> 
<div class='"media weLL"> 
{{#tink-to 'cryptid’' cryptid.id}} 























































































































{{#1link-to 'cryptid' cryptid.id}} 
{{listing-item imagePath=cryptid.profileImg name=cryptid.name}} 
{{/Link-to}} 
</div> 
{{else}} 
<div class="jumbotron"> 
<hl>No Creatures</h1> 
</div> 
{{/each}} 
</div> 


注意 到 这 两 个 模板 引用 组 件 时 的 不 同 之 处 了 吗 ? 目击 记录 列表 使 用 了 {{yield}} 为 
<div class="caption"> 添 加 子 元 素 , 但 是 神秘 生物 模板 不 需要 那么 做 。 如 果 只 需要 使 用 组 
件 模板 内 置 的 元 素 ， 则 可 以 使 用 行 级 组 件 的 写法 一 一 就 像 上 面 的 代码 ， 在 书写 标签 名 
{{fListing-item}}y 时 开头 不 加 #， 同 样 在 结尾 处 也 不 需要 结束 标记 {{/Listing-item}}。 

为 了 给 组 件 添加 链接 ， 用 {{#Link-to}} 包 右 整 个 组 件 。 在 旧 代 码 中 只 为 图 片 添加 了 链接 ， 
而 在 新 代码 中 整个 组 件 都 可 以 被 点 击 , 这 个 链接 指向 神秘 生物 详情 页 。 这 个 例子 展示 了 在 不 同 路 
由 模板 中 泻 染 相似 内 容 时 使 用 组 件 的 灵活 性 。 当 然 也 可 以 通过 给 组 件 加 入 新 属性 , 在 组 件 中 实现 
添加 链接 的 功能 。 
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25.3 ”数据 向 下 ， 动 作 向 上 


接 下 来 创建 一 个 新 组 件 , 它 需要 跟随 应 用 的 状态 变化 而 变化 。 这 个 组 件 是 一 个 提示 框 , 会 在 
添加 列表 条 目 后 显示 一 条 提示 信息 。 

组 件 有 一 个 非常 重要 的 原则 ， 就 是 “数据 〈 或 状态 ) 向 下 ， 动 作 向 上 ”。 组 件 与 控制 天 不 同 ， 
它 不 能 直接 修改 应 用 的 状态 ,所 以 它 需要 以 动作 的 形式 向 上 传递 变化 。 而 另 一 方面 ,组件 从 父 模 
板 接 受 状态 数据 ， 也 就 是 数据 向 下 传递 ( 如 图 25-2 所 : )。 























>- 调用 "MyAction"- Login() --------------------------------; 


{ { .点击 -……、 


text:"Login", 


~ myAction: (action'Login') 水 
控制 需 } 8 


isLoggedln:false, 
My-Button 
组 件 





action:{ 


、， -| Login 











login(){ 演 染 
this.set('isLoggedln' ,true); | 一 一 
} click Of 
logout(){ this.get('myAction')() 六 演 染 
this.set('isLoggedln' ,false); } 有 旦 不 
5 Logout 
} { ~ 
可 ， 和 
2 text:"Logout" \ 
1 myAction: (action'Logout') ee 7 9 
“局 击 - 





图 25-2 ”数据 向 下 ， 动 作 向 上 


当 组 件 需 要 更 换 控 制 器 时 , 可 以 直接 把 路 由 模型 传 给 组 件 ， 而 不 需要 使 用 控制 器 的 装饰 器 或 
者 动作 。 

在 app/templates/application.hbs 中 创建 新 的 组 件 和 动作 。 在 目击 记录 创建 完成 时 , 它们 会 弹出 
一 条 全 局 的 提示 消息 。 

首先 ， 在 终端 中 生成 新 组 件 : 

ember g component flash-alert 

{f{tflash-atert}} 组 件 将 作为 一 个 容器 ， 其 中 包含 了 提示 信息 的 内 容 和 使 用 <strong> 修 饰 
的 标题 。 
用 下 面 的 代码 替换 app/templates/components/flash-alerthbs 的 内 容 : 

















全 

















{{fyietd}} 
<strong>{{typeTitle}}!</strong> {{message}} 


修改 app/components/flash-alertjs， 为 组 件 添加 classNames 属 性 : 


import Ember from "ember '; 





export default Ember.Component.extend({ 
classNames: ["alert"] 
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}); 
修改 完成 后 ， 组 件 会 泻 染 出 如 下 代码 : 


<div class="alert"> 
<strong>{{typeTitle}}!</strong> {{message}} 
</div> 








25.4 类 名 绑 定 


虽然 组 件 能 正常 显示 信息 , 但 是 却 无 法 根据 消息 的 类 型 调整 组 件 的 样式 。Bootstrap 提 供 了 许 
多 提示 框 的 样式 和 样式 变 体 : "alert-success" 、"alert-info" 、"alert-warning" 和 
"alert-danger"。 

为 了 使 用 这 些 样式 ， 需 要 使 用 计算 属性 来 生成 类 型 名 ， 使 消息 类 型 与 样式 类 名 一 一 对 应 。 

首先 在 app/components/flash-alertjs 中 添加 一 个 计算 属性 : 























export default Ember.Component.extend({ 
classNames: ["alert"], 
typeClass: Ember.computed('alertType', function() { 
return "alert-" + this.get('alertType'); 
}) 

}); 

这 里 创建 了 一 个 计算 属性 typeClass ， 用 于 为 组 件 的 <div> 容 器 提供 类 名 。 这 个 计算 属性 会 
获取 组 件 的 alertType 属 性 ( 稍 后 添加 )， 然 后 为 "alertType" 添 加 "alert-" 前 级 并 返回 ， 这 样 
在 使 用 组 件 时 可 以 只 传人 "success"、"info"、"warning" 或 者 "danger" 等 提示 类 型 就 可 以 获 
得 对 应 样式 的 提示 框 。 除 了 typeClass 之 外 ,后面 还 有 一 个 计算 属性 也 要 使 用 alertType 属 性 。 

最 后 ， 修 改 app/components/flash-alertjs， 把 组 件 的 类 名 与 属性 相互 绑 定 : 


























export default Ember.Component .extend ({ 
classNames: ["alert"], 
classNameBindings: ['typeClass'], 
typeClass: Ember.computed('alertType', function() { 
return "alert-" + this.get('alertType'); 
}) 
}); 


这 段 代 码 的 功能 是 把 计算 属性 typeClass 的 值 作为 一 个 类 名 加 入 到 classNames 数 组 中 。 这 
样 每 当 alertType 属 性 改变 时 ,组 件 的 样式 就 会 相应 地 改变 。 

classNameBindings 是 classNames 属 性 专用 的 。 除 此 之 外 Ember 还 有 一 个 组 件 属性 与 
cLassNameBindings 互 补 ，attributeBindings， 它 可 以 对 其 他 属性 进行 绑 定 。 可 以 用 这 个 方 
法 把 组 件 元 素 的 属性 与 组 件 属 性 相 绑 定 。 举 个 列子 ， 将 href 与 一 个 计算 属性 绑 定 : 


export default Ember.Component .extend ({ 
attributeBindings: ['href', 'customHREF:href'], 
href: "http://ww.mydomain.com", 
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customHREF: "http://www.mydomain.com" 


}); 

通过 使 用 属性 绑 定 , 可 以 把 传人 组 件 的 状态 数据 与 组 件 的 任意 属性 相互 绑 定 , 更 多 细节 可 以 
参考 Ember 的 文档 。 

接 下 来 添加 一 个 计算 属性 , 把 消息 类 型 以 字符 串 的 形式 泻 染 到 页 面 中 。 由 于 在 模板 中 用 到 了 
typeTitle， 所 以 要 在 app/components/flash-alert.js 中 添加 这 个 计算 属性 : 


import Ember from "ember '; 



































export default Ember.Component.extend({ 


typeClass: Ember.computed('alertType', function() { 
return "alert-" + this.get('alertType'); 
})， 
typeTitle: Ember.computed('alertType', function() { 
return Ember.String.capitalize(this.get('alertType')); 
}) 
}); 


现在 已 经 为 提示 框 加 入 了 标题 ， 标 题 的 内 容 是 提示 类 型 的 大 写 形式 ， 并 且 在 标题 外 使 用 了 
<strong> 标 签 。 同 时 ， 为 组 件 添加 了 一 个 类 名 和 一 个 装饰 器 ， 它 们 通过 计算 属性 对 atertType 
进行 处 理 后 得 到 各 自 需 要 的 结果 。 

接 下 来 ， 修 改 app/templates/application.hbs， 把 组 件 应 用 到 页 面 中 : 


<header> 

















</header> 

<div class="container"> 
{{flash-alert}} 
{{outlet}} 

</div> 


这 个 组 件 是 一 个 行 级 组 件 ， 也 就 意味 着 组 件 不 用 为 {{yietd}} 泻 染 任何 代码 。 换 名 话说 , 根 
本 不 需要 在 这 个 组 件 的 模板 中 添加 {{yietld}} 标 签 。 


25.5 ”数据 向 下 


截至 目前 ， 提 示 框 还 只 是 一 个 空 的 容器 ， 因 为 并 没有 给 它 传 任何 数据 。 打 开 app/templates/ 
application.hbs， 添 加 以 下 代码 : 














{{flash-alert message="This is the ALert Message" alertType="success"}} 
{{outlet}} 
</div> 


启动 服务 器 然后 访问 http://localhost:4200/sightings ， 查 看 {{flash-alert}} 组 件 演 染 后 的 效 
果 (如 图 25-3 所 示 )。 
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©00 rcker 
€ 人 localhost:4200/sightings 孚 三 
Tracker Sightings Cryptids Witnesses [x | Elements Console Sources Network » x 
© 了 top 了 Preserve log 
Success! This Is the Alert Message Filter Regex [DD Hide network messages 
图 | erors Warnings Info Logs Debug Handled 
DEBYG: 一 -一 一 -一 一 一 一 -一 一 一 一 - ember. debug, is:6395 
Sightinas DEBUG: Ember : ember, debug, js:6395 
9 g DEBUG: Ember Data : ember, debug. js:6395 
DEBUG: jQuery ember. debug., is:6395 
DEBUG: -一 一 -一 -一 一 -一 一 -一 -一 - ember. debug, is:6395 
> 
gr Wf/ 
AY DA 
Aaron 
Atlanta, 
GA 
6 minutes ago 





图 25-3 ”提示 信息 





现在 提示 框 已 经 可 以 在 页 面 中 显示 了 ,下 一 步 要 把 提示 的 内 容 和 提示 框 的 类 型 换 成 动态 数 
据 。 首 先生 成 一 个 新 控制 器 ， 在 终端 中 执行 : 


ember g controller appLication 


Fk 


{{ftfLash-atert}} 组 件 的 状态 由 应 用 的 总 控制 器 负责 管理 ， 所 以 需要 为 控制 需 添加 一 些 属 
性 。 请 打开 app/controllers/application.js， 添 加 如 下 属性 : 


import Ember from 'ember'; 














export default Ember.Controller.extend({ 
alertMessage: null, 
alertType: null, 
isAlertShowing: false 

}); 


添加 的 这 些 属性 将 会 通过 动作 进行 修改 。 修 改 app/templates/application.hbs, 将 这 些 属性 值 传 
给 提示 框 组 件 : 








</header> 
<div class="container"> 
{{#if isAlertShowing}} 
{{flash-alert message="This is the Alert Message' alertType="success"}} 
alertMessage alertType=alertType}} 





{{/if}} 
{{outlet}} 
</div> 


408 第 25 章 ”组件 














现在 控制 侨 的 属性 值 可 以 根据 动作 进行 修改 了 。 只 有 在 ijsAlertShowing 为 true 和 是 其 他 属性 
都 有 值 时 , 应 用 才 会 泻 染 提示 框 。 设置 属 性 的 动作 是 由 控制 右 发 出 的 ， 它 会 在 应 用 中 向 上 层 层 传 
递 。 如 何 才能 向 上 传递 呢 ? 好 在 Ember 已 经 内 置 这 个 机 制 了 ( 如 图 25-4 所 | )。 




















应 用 根 路 由 


Actions: 
flash(){ 

//set flash state 
} 













Actions: 
[no'flash'] 


Actions: 
[no'flash'] 

















提交 事件 处 
理 程序 调用 


save() 








this. send([action name]) 


经 过 岁 套 路 由 向 上 冒 泡 








控制 器 


Action: 
save(){ 
this.send('flash') 


} 





图 25-4 ”提示 信息 泻 染 流程 


需要 给 路 由 添加 一 个 动作 。 在 控制 器 中 调用 一 个 动作 ,然后 动作 会 依次 触发 当前 控制 器 、 当 
前 路 由 、 父 级 路 由 和 应 用 根 路 由 。 

由 于 需要 在 app/templates/application.hbs 中 使 用 提示 框 组 ， 所 以 要 创建 一 个 应 用 根 路 由 : 

ember g route application 

运行 这 条 命令 后 ， 会 看 到 如 下 提示 : 

[?] Overwrite app/templates/application.hbs? 

请 输入 n 或 者 ho， 否则 刚 创建 的 模板 文件 会 被 覆盖 ， 因 为 只 需要 生成 app/routes/application.js 
文件 。 

接 下 来 对 app/routes/application.js 做 一 些 修改 : 


import Ember from 'ember'; 








export default Ember.Route.extend({ 
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actions: { 
flash(data){ 
this.controller.set('alertMessage', data.message); 
this.controller.set('alertType', data.alertType); 
this.controller.set('isAlertShowing', true); 


} 
} 
}); 


25.6 ”动作 向 上 


前 面 已 经 为 项 目 添 加 了 显示 提示 框 所 用 的 动作 ,现在 只 需要 触发 这 个 动作 并 传人 数据 就 可 
以 在 页 面 上 展示 相应 的 提示 信息 了 。 这 里 的 数据 是 一 个 对 象 ， 其 中 包含 aLertType 和 message 
属性 。 

alertType 属 性 的 值 不 仅 需 要 在 页 面 中 显示 ， 也 被 用 来 控制 提示 框 的 样式 ， 它 可 以 在 以 下 选 
项 中 取 值 : "success"、"warning"、"info" 和 "danger"。 从 控制 器 中 触发 动作 的 方法 如 下 : 


this.send('flash', {alertType: "success", message: "You Did It! Hooray!"}); 


在 用 户 成 功 添加 新 的 目击 记录 后 调用 这 个 提示 框 。 打 开 app/routes/sightings/new.js， 添 加 以 下 
代码 : 



































create() { 
var self = this; 
this.get('sighting').save().then(function(data){ 
self.send('flash', {alertType: "success", message: "New sighting."}); 
self.transitionTo('sightings'); 


})y 




















现在 点 击 页 面 上 的 New Sighting 按 钮 ， 进 入 创建 记录 的 页 面 。 在 列表 中 任 选 一 种 神秘 生物 和 
一 位 目击 者 , 输入 地 点 ,最 后 点 击 Save。 当 这 条 记录 插入 数据 库 时 ， 应 用 会 跳 转 到 目击 记录 列表 
页 ， 同 时 在 页 面 的 最 项 部 会 出 现 一 条 提示 信息 ( 如 图 25-5 所 : )。 

最 后 一 步 是 添加 动作 和 事件 来 移 除 消息 。 由 于 只 需要 在 创建 记录 后 展示 提示 框 , 所 以 需要 在 
移 除 消息 时 隐藏 相关 元 素 。 

在 app/controllers/application.js 中 添加 一 个 removeALert 动 作 : 















































export default Ember.Controller.extend({ 


alertMessage: null, 
alertType: null, 
isAlertShowing: false, 
actions: { 
removeAlert(){ 
this.set('alertMessage', ""); 
this.set('alertType', "success"); 
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this.set('isAlertShowing', false); 





}); 
©00 /rc 去 
€ G localhost:4200/sightings 下 三 
Tracker Sightings Cryptids Witnesses 民 后 | Elements Console Sources Network » ; X 
Q@ 了 top vv 目 Preservelog 
Er 区 Regex © Hide network messages 
GY Emors Warnings Info Logs Debug Handled 
ei ember. debug, is:6395 
i i DEBUG: Ember :2.4.4 siber, i 
Sightings DEBUG: Ember Data : 2.4.3 ember. debug. js:6395 
DEBUG: jQuery 2 2 ember. debug. js:6395 
DEBYG: 一 一 -一 一 一 一- 一 一- 一 -一 -一 一 一 ember. debug, js:6395 
六 二 > 
让 和 p? "| 
WL Bb 
EY 一 
Aaron Harry 
Atlanta, Calloway 
GA Gardens, 
35 minutes ago 


图 25-5 ”提示 信息 : 新 目击 记录 





这 上段 代码 将 ijsAlertShowing 设 置 为 false ， 将 atertMessage 设 置 为 空 字 符 串 ， 还 将 
alertType 设 置 为 "success"。 
接 下 来 ， 向 组 件 发 送 removeAlert 动 作 。 在 app/templates/application.hbs 中 加 入 以 下 代码 : 


</header> 
<div class="container"> 

{{#if isAlertShowing}} 

{{flash-alert message=alertMessage alertType=alertType}?3 
close=(action "removeAlert")}} 

{{/if}} 

{{outlet}} 
</div> 
这 里 close=(action "removeAlert") 的 语法 似乎 有 些 奇 怪 。 其 实 这 是 Ember 2.0 中 加 入 的 

新 语法 ， 叫 作 闭 包 动作 ( closure action )。 它 的 功能 有 些 类 似 于 起 别名 ， 将 函数 字面 量 传人 组 件 


的 cLose 属 性 ， 然 后 可 以 在 组 件 中 直接 触发 动作 。 

如 果 要 在 旧版 本 的 Ember 中 实现 同样 的 逻辑 会 非常 麻烦 。 闭 包 动 作 不 是 简单 地 将 函数 作为 参 
数 传递 。 如 果 想 了 解 更 多 细节 ， 可 以 参考 EmberJS 博 客 中 一 篇 介绍 Ember 1.13 版 和 2.0 版 新 特性 的 
文章 : emberjs.com/blog/2015/06/12/ember-1-13-0-released.html。 
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接 下 来 在 组 件 中 触发 这 个 动作 。 由 于 组 件 本 身 是 DOM 元 素 的 实例 ， 所 以 在 组 件 中 可 以 以 键 
值 对 的 形式 为 DOM 元 素 定 义 事件 。 我 们 在 组 件 中 定义 cLick 方 法 ，Ember 会 自动 为 <div> 容 需 添 
加 事件 监听 器 ， 当 发 生 点 击 时 调用 该 方法 。 编 辑 app/components/flash-alertjs， 加 入 以 下 代码 : 


import Ember from 'ember'; 





export default Ember.Component .extend ({ 


typeTitle: Ember.computed('alertType', function() { 
return Ember.String.capitalize(this.get('alertType')); 
})， 
click() { 
this.get('close')(); 


}); 

当 执 行 组 件 的 ctlose 属 性 时 , 会 调用 控制 器 中 的 removeAlert 方 法 。 通过 闭 包 动 作 , 我 们 使 
用 一 个 在 父 控制 器 中 定义 的 函数 为 组 件 属性 赋值 ， 并 把 组 件 的 功能 绑 定 到 了 外 层 作 用 域 中 。 你 
可 以 将 提示 框 组 件 添 加 到 任意 层级 的 页 面 中 ,并 且 可 以 根据 上 下 文 环境 为 cLose 动 作 赋 予 不 同 的 
功能 。 

现在 我 们 已 经 完成 了 一 个 组 件 的 开发 ， 并 通过 它 展 示 了 组 件 的 运作 方式 : 数据 向 下 ,动作 向 
上 。 数 据 向 下 传递 以 便 定制 组 件 的 内 容 和 效果 ,动作 向 上 传递 以 便 用 外 层 控 制 器 控制 组 件 的 状态 。 
请 在 开发 组 件 时 牢记 这 个 模式 。 

学 完 第 四 部 分 的 所 有 内 容 , 你 便 了 解 了 什么 是 现代 化 Ember 应 用 的 架构 。 你 还 知道 了 MVC 模 
式 以 及 框架 如 何 使 用 预 置 的 对 象 拆 分 应 用 的 逻辑 。 此 外 ， 你 还 学 会 了 如 何 使 用 Ember 提 供 的 脚 手 
架 和 构建 工具 ， 熟 悉 了 Ember 的 命名 模式 和 开发 惯例 。 相 信 从 现在 开始 ， 你 再 输入 ember new 创 
建新 应 用 时 肯定 会 更 加 自信 ， 可 以 游 力 有 余地 创建 模型 、 编 辑 路 由 或 是 开发 组 件 。 

Ember 社 区 共同 维护 着 这 个 出 色 的 框架 ,而 且 随 着 JavaScript 的 成 长 也 在 不 断 提升 其 效率 。 创 
造 这 个 框架 的 人 当初 所 遇 到 的 挑战 , 你 在 不 断 磨 炼 自己 JavaScript 技 能 的 过 程 中 也 会 遇 到 。 别 忘 了 
遇 到 麻烦 就 提问 , 可 能 的 话 帮 忙 修 修 bug, 尽 可 能 地 多 做 一 些 回 馈 。 你 现在 已 经 是 火热 的 JavaScript 
社区 的 一 员 了 。 


25.7 ”初级 挑战 ， 自 定义 提示 信息 


新 建 目击 记录 后 , 出 现 的 消息 框 {{flash-alert}} 的 内 容 太 通用 了 。 请 在 消息 内 容 中 加 入 新 
添加 的 目击 记录 发 生 的 地 点 和 时 间 。 


25.8 ”中 级 挑战 : 将 导航 条 转化 为 组 件 


请 将 应 用 的 导航 条 ( NavBar ) 也 转化 成 一 个 组 件 ， 在 其 中 包含 一 个 属性 ， 通 过 这 个 属性 控 
制导 航 条 在 两 种 形式 间 切 换 。 另 外 为 组 件 添加 条 件 语句 ， 以 便 在 导航 条 中 展示 自 定义 链接 。 
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25.9 ”高 级 挑战 :提示 框 数组 


请 将 提示 框 组 件 的 参数 改 为 数组 , 其 中 可 以 包含 多 条 不 同类 型 和 内 容 的 消息 ,以 满足 同时 展 
示 多 个 提示 框 的 场景 的 需求 。 在 设置 消息 时 使 用 Ember.ArrayProxy 而 不 用 再 使 用 单独 的 属性 。 
请 将 消息 内 容 、 消 息 类 型 、 消 息 索 引 添 加 到 数组 中 。( 消息 索引 是 一 个 新 的 属性 ， 添 加 这 个 属性 
的 目的 是 在 用 户 点 击 消息 时 将 其 从 数组 中 移 除 。) 















































后 记 


























恭喜 你 ! 你 马上 就 要 读 完 本 书 了 。 不 是 所 有 人 都 像 你 一 样 自律 ， 能 够 坚持 学 习 并 完成 书 中 的 
项 目 。 给 自己 点 个 赞 吧 ! 
努力 终 有 回报 ， 你 已 经 是 一 个 前 端 开发 者 了 。 


26.1 最 后 的 挑战 


还 有 最 后 一 个 挑战 : 成 为 一 个 优秀 的 前 端 开 发 者 。 优 秀 的 开发 者 都 各 有 其 优秀 的 方式 ， 所 以 
你 也 要 找到 自己 的 方式 。 

那么 从 何 开始 呢 ? 下 面 有 一 些 建 议 。 

写 代 码 。 如 果 你 不 运用 前 面 所 学 的 知识 ， 你 很 快 就 会 忘记 它们 。 为 一 个 项 目 贡献 代码 ， 或 自 
己 写 一 个 简单 应 用 。 不 管 做 什么 ， 不 要 浪费 时 间 : 写 代码 。 

学 习 。 你 已 经 掌握 了 书 中 许多 知识 的 一 小 部 分 , 它们 是 否 激发 了 你 的 灵感 呢 ? 运用 你 最 喜欢 
的 技术 写 一 些 代码 ; 查找 、 阅 读 相 关 文档 一 一 如 果 没 有 文档 , 那 就 去 读 读书 。 男 外 ， 去 JavaScript 
Jabber 播 客 节目 〈devchat.twWjs-jabber )， 找 一 些 最 近 和 前 端 开 发 相关 的 有 趣 又 有 料 的 讨论 。 

与 人 交流 。 参 加 本 地 的 交流 会 ,在 这 种 场合 能 遇 到 兴趣 相投 的 开发 者 。 另 外 , 很 多 高 级 前 端 
开发 者 在 Twitter 上 都 很 活跃 。 还 可 以 参加 前 端 会 议 ， 遇 见 更 多 开发 者 。( 也 许 会 见 到 我 们 哦 ! ) 

探索 开源 社区 。 前 端 开发 在 www.github.com 上 正 攻 勃 发 展 着 。 如 果 你 发 现 一 个 很 酷 的 库 ， 不 
妨 看 看 它 的 贡献 者 参与 的 其 他 项 目 。 你 也 要 积极 分 享 自 己 的 代码 一 一 说 不 定 就 有 人 会 觉得 你 写 的 
代码 很 好 用 或 者 很 有 趣 。 通 过 WDRL ( Web Development Reading List，Web 开 发 阅读 清单 ) 邮件 
列表 ， 你 还 可 以 了 解 到 前 端 社区 (wdrlLinfo ) 正在 发 生 的 事情 。 


26.2 ”插播 一 个 广告 


你 可 以 在 Twitter 上 找到 我 们 。Chris 是 @radishmouse，Todd 是 @tgandee。 

如 果 你 喜欢 这 本 书 ， 可 以 去 www.bignerdranch.com/books 看 看 Big Nerd Ranch Guides 系 列 的 其 
他 图 书 。 我 们 还 为 开发 者 提供 了 一 系列 的 一 周 课程 ， 只 用 一 周 就 能 轻松 学 习 一 本 书 的 精华 部 分 。 
当然 ， 假 如 你 只 需要 找 人 开发 很 棒 的 代码 ， 我 们 也 提供 外 包 编 程 服务 。 更 多 信息 请 访问 
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Www.bignerdranch.com。 
26.3 感谢 你 
如 果 没 有 像 你 一 样 的 读者 ， 就 没有 我 们 这 本 书 。 谢 谢 购买 并 阅读 了 本 书 。 





专业 一 源 自 大 名 昂昂 的 Big Nerd Ranch 训 练 营 实 战 课 程 ， 该 训练 营 已 经 为 微软 、 
Google、Facebook 等 行业 巨头 培养 了 众多 专业 人 才 。 
领先 一 一 涵盖 前 端 开发 先进 的 技术 ， 实 现 精彩 Web 应 用 。 


实战 一 一 4 大 Web 开 发 实战 项 目 ， 以 项 目 驱 动 讲解 ， 以 实践 引领 理论 。 
梯度 一 一 从 基础 的 交互 式 网 页 到 实时 聊天 应 用 ， 由 浅 入 深 ， 横 跨 大 前 端 。 





“本 书 将 时 下 流行 的 技术 融入 4 个 实战 项 目 中 ， 深 入 浅 出 地 讲解 了 Web 开 发 的 整个 过 程 ， 既 重视 理论 ， 又 切合 实战 。 
通过 学 习 ， 你 不 仅 可 以 更 好 地 理解 JavaScript、CSS3 和 HTML5， 更 能 创造 出 真正 跨 平台 的 Web 应 用 ， 将 胜利 的 果实 呈 
现在 用 户 面前 。 总 之 ， 不 管 你 之 前 有 没有 Web 开 发 经 验 ， 本 书 都 能 让 你 受益 菲 浅 。” 


一 一 田 爱 娜 ，HTML5 梦 工场 、iWeb 学 院 创 始 人 
“我 非常 推崇 这 本 书 的 写作 风格 和 它 明 了 易 懂 的 示例 ， 作 者 通过 逐步 提高 项 目的 难度 引导 读者 学 习 。” 
一 一 Amazon 读 者 


“这 是 我 的 第 3 本 Big Nerd Ranch Guide 系 列 图 书 ， 不 得 不 说 ， 他 们 的 讲解 方法 真是 太 棒 了 | 我 在 阅读 的 过 程 中 就 能 
运用 学 到 的 大 部 分 内 容 ， 而 且 项 目的 展开 方式 、 作 者 使 用 的 命名 约定 、 文 件 夹 结 构 和 代码 组 织 也 都 是 亮点 ! ” 


一 一 Amazon 读 者 


Chris Aquino 
Web 开 发 专家 ，Big Nerd Ranch 讲 师 。 作 为 开发 者 ， 他 希望 给 用 户 提供 有 意义 的 数据 体验 ; 作为 讲师 ， 他 致力 于 帮助 他 
的 团队 和 学 生 构 建 出 更 好 的 Web。 平 时 喜爱 发 条 玩具 、 浓 缩 咖啡 和 各 式 烧 烤 。 


Todd Gandee 
前 端 工程 师 ，Big Nerd Ranch 讲 师 。 拥 有 十 余年 Web 顾 问 经 验 ， 专 业 技 能 娴熟 。 业 余 时 间 喜 欢 跑步 、 骑 行 以 及 构 宕 。 
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